快捷導(dǎo)航

Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解

更新時(shí)間：2022年11月21日 10:40:04 作者：小佩丫

el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關(guān)資料,需要的朋友可以參考下

一、背景說(shuō)明

技術(shù)：Vue3 + Element Plus
需求：在選擇組織機(jī)構(gòu)時(shí)以樹(shù)結(jié)構(gòu)下拉展示。
用到組件：TreeSelect 樹(shù)形選擇組件（el-tree-select）

官網(wǎng)文檔地址：

https://element-plus.gitee.io/zh-CN/component/tree-select.html
https://element-plus.gitee.io/zh-CN/component/tree.html

簡(jiǎn)要說(shuō)明：

el-tree-select組件是el-tree和el-select的結(jié)合體，他們的原始屬性未被更改，故具體屬性、方法還是參照el-tree和el-select

二、使用

1. dom

 <el-tree-select
   v-model="form.deptId"
   lazy
   ref="treeRef"
   :load="loadNode"
   :props="{ value: 'deptId', label: 'deptName'}"
   value-key="deptId"
   node-key="deptId"
   placeholder="請(qǐng)選擇"
   show-checkbox
   check-strictly
   highlight-current
   :default-expanded-keys="defaultExpandedNodes"
 />

相關(guān)屬性描述：

v-model                   id值。只要這個(gè)id值在樹(shù)里能匹配上，就能夠順利回顯出其label值。
lazy                    開(kāi)啟懶加載
load                   加載子樹(shù)數(shù)據(jù)的方法
value-key                作為 value 唯一標(biāo)識(shí)的鍵名。簡(jiǎn)單說(shuō)就是主鍵，根據(jù)自己后端返回的字段修改
node-key               每個(gè)樹(shù)節(jié)點(diǎn)用來(lái)作為唯一標(biāo)識(shí)的屬性。簡(jiǎn)單理解為樹(shù)節(jié)點(diǎn)的主鍵，同value-key
props                   配置選項(xiàng)。一般配置value和label的屬性值
show-checkbox           開(kāi)啟復(fù)選框
check-strictly           可選擇任一級(jí)別
highlight-current       選中高亮顯示
default-expanded-keys   默認(rèn)展開(kāi)節(jié)點(diǎn)的key數(shù)組（懶加載時(shí)用于數(shù)據(jù)回顯，這個(gè)屬性非常關(guān)鍵）

2.methods

/** 懶加載獲取樹(shù)形結(jié)構(gòu)*/
function loadNode(node, resolve) {
  // node其實(shí)是需要展開(kāi)樹(shù)節(jié)點(diǎn)，但是第一次的node是個(gè)無(wú)用的數(shù)據(jù)，可以認(rèn)為這個(gè)node是element給我們創(chuàng)建的，判斷的話，就是level等于0
  if (node && node.level == 0) { 
    getDeptData(0, resolve);
  } else {
    getDeptData(node, resolve);
  }
}

// 從后端獲取數(shù)據(jù)列表
function getDeptData(node, resolve){
  //構(gòu)造參數(shù) 
  let params = {};
  params.pageSize = 100;
  if(node == 0){				//根節(jié)點(diǎn)	
    params.deptId = '1';
  }else if(node.data.deptId){	//中間節(jié)點(diǎn)
    params.parentId = node.data.deptId;
  }else{
    return resolve([]);
  }
  // listDept是像后端訪問(wèn)組織結(jié)構(gòu)數(shù)據(jù)的接口，根據(jù)實(shí)際場(chǎng)景修改
  listDept(params).then(response => {
    let data = response.data;
    return resolve(data);
  })
}

后端返回的數(shù)據(jù)結(jié)構(gòu)

三、回顯

由于用到懶加載，與一次性全部加載數(shù)據(jù)不同的是，當(dāng)前只有ID，而樹(shù)結(jié)構(gòu)還沒(méi)渲染，就會(huì)導(dǎo)致沒(méi)有l(wèi)abel回顯。所以我們要在組件剛渲染的時(shí)候，就構(gòu)造我們想要的樹(shù)節(jié)點(diǎn)。

用到了default-expanded-keys屬性，表示默認(rèn)展開(kāi)節(jié)點(diǎn)的key數(shù)組。el-tree-select會(huì)按照這個(gè)keys數(shù)組，自動(dòng)調(diào)用loadNode方法，獲取數(shù)據(jù)并渲染樹(shù)節(jié)點(diǎn)。

default-expanded-keys的取值有兩種思路：

增加/修改的時(shí)候，獲取從頂層根節(jié)點(diǎn)到當(dāng)前選中節(jié)點(diǎn)的key路徑，比如：[‘01’,‘0101’,‘010101’]，一并保存到數(shù)據(jù)表里。
dept數(shù)據(jù)表里增加這么個(gè)字段，從根節(jié)點(diǎn)到當(dāng)前節(jié)點(diǎn)的key路徑

最后在獲取當(dāng)條數(shù)據(jù)form內(nèi)容的同時(shí)，把要展開(kāi)節(jié)點(diǎn)的keys路徑賦值給default-expanded-keys即可，就會(huì)默認(rèn)展開(kāi)到當(dāng)前節(jié)點(diǎn)并成功回顯label。

總結(jié)

到此這篇關(guān)于Element Plus中el-tree-select組件懶加載+數(shù)據(jù)回顯的文章就介紹到這了,更多相關(guān)el-tree-select組件懶加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: