一、背景說明

• 技術(shù)：Vue3 + Element Plus
• 需求：在選擇組織機構(gòu)時以樹結(jié)構(gòu)下拉展示。
• 用到組件：TreeSelect 樹形選擇組件（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

簡要說明：

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="請選擇"
   show-checkbox
   check-strictly
   highlight-current
   :default-expanded-keys="defaultExpandedNodes"
 />

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

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

2.methods

/** 懶加載獲取樹形結(jié)構(gòu)*/
function loadNode(node, resolve) {
  // node其實是需要展開樹節(jié)點，但是第一次的node是個無用的數(shù)據(jù)，可以認(rèn)為這個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é)點	
    params.deptId = '1';
  }else if(node.data.deptId){	//中間節(jié)點
    params.parentId = node.data.deptId;
  }else{
    return resolve([]);
  }
  // listDept是像后端訪問組織結(jié)構(gòu)數(shù)據(jù)的接口，根據(jù)實際場景修改
  listDept(params).then(response => {
    let data = response.data;
    return resolve(data);
  })
}

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

三、回顯

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

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

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

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

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

總結(jié)

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

最新評論