el-tree 懒加载数据，展开的节点与查询条件联动，且对查询的节点进行定位_el-tree node-key

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

步骤1：el-tree设置node-key

首先要知道node-key 是设置展开和选中的必要设置，其绑定的值是整个树唯一的（一般绑定 id 等），如果出现重复，会报错。同时设置展开某个节点时，如果这个节点的 id 存在重复，则会出现展开混乱的现象

备注：这里注意，可能在某些特殊时候，后台返回的树形数据，并不存在唯一值（比如我这里，绑定的字段 id ，但在数据里，存在部分数据 id 会一致的情况），这个时候要么是让后端将 id 处理成唯一值，要么就是我们自己对拿到的数据进行处理了（这里我是自己处理的）

步骤2：懒加载时对数据进行处理，给整个树形数据添加唯一值

因为数据量过大，我这里的el-tree用的是懒加载获取数据的方法(:load=“loadNode”)

<el-tree
  ref="tree"
  node-key="key"
  accordion
  @node-expand="nodeExpandFn"
  :filter-node-method="filterNode"
  :data="treeData"
  :default-expanded-keys="expanded"
  :props="defaultProps"
  :indent="0"
  auto-expand-parent
  highlight-current
  :load="loadNode"
  @node-click="handleNodeClick"
</el-tree>
可以看到，node-key 我绑定的是 key 字段，这是我给数据中每个对象添加的唯一值：
 loadNode方法中，在获取数据时添加唯一值，这里不用关注其他代码，只需关注我根据每个节点的特性，给每个节点对象都增加了一个 key 字段 （我这里第三级的节点数据，每个对象的id是相同的，这也是我选择增加 key 字段的原因） 
loadNode(node, resolve) {
 if (node.level === 0) {
   this.resolve = resolve
   this.chooseNode = node
   queryKSHDeviceTree({ type: "0" }).then(res => {
     const treeData = [];
     res.resultValue.forEach(e => {
       e.key = e.id; // key ----------------------
       treeData.push(e);
     });
     resolve(treeData);
   });
 else if (node.level === 1) {
   queryKSHDeviceTree({ type: '1' }).then(res => {
     let treeData = [];
     res.resultValue.forEach(e => {
       e.key = e.id; // key ------------------------
       treeData.push(e);
     });
     resolve(treeData);
   });
 } else if (node.level === 2) {
   queryKSHDeviceTree({ type: '2',pId: node.data.id }).then(res => {
     let treeData = [];
     res.resultValue.forEach(e => {
       // 这里根据当前对象自己的数据，拼出一个唯一值
       e.key = node.data.id + e.pId; // key --------------------
       treeData.push(e);
     });
     resolve(treeData);
   });
步骤3：(联动) 点击左侧树形结构，右侧对应查询框自动赋值
 
这一步相对来说简单一些，在el-tree的点击事件 handleNodeClick 中进行操作 
// 如果右侧查询框绑定的字段为 queryForm.cityId
// 点击第二级节点，对其他查询框赋值也同理
handleNodeClick(data, node) {
  if (data.label === "city") {
    this.queryForm.cityId = data.id;
  else if ...
步骤4：(联动) 右侧查询条件选择好后，点击查询，左侧树形结构自动展开对应节点
 
这里 主要用到了 :default-expanded-keys=“expanded” （默认展开节点）
 expanded 为 存放 key 值的数组 
其实当整个树形数据完整，并且设置了 auto-expand-parent 
（展开子节点的时候自动展开父节点）的情况下，
这个时候expanded只用保存最后一级的key值即可
但是，由于我这里的数据是懒加载的，意味着虽然你右侧选了最后一级的数据，点击查询，
但我左侧的树形数据里，还并未加载子级数据，所以这个时候，
即时你将key存入expanded里，它找不到，所以也是没有用的
***所以这个时候，我们需要把每一级要展开的节点key字段都拿到，并存入expanded中
***这样，el-tree在自动展开某一节点时，它会根据懒加载方法，自动获取子节点的数据
***当子节点数据获取到后，它也会将每个节点的key自动去匹配expanded中的值，若存在相同的，
就会接着展开
！！！（简单的说，就是把每一级要展开的节点key字段都拿到，并存入expanded中，
同时懒加载方法写好，其他的交给el-tree自己就行）
经过测试，在展开节点后，对expanded重新赋值，已展开的节点不会自动关闭，所以这里也写了方法，先将el-tree所有的节点进行关闭 
// 查询方法
queryClick() {
  let obj = {
    refName: 'tree2',
    cityId: this.queryForm.cityId,
    twoId: this.queryForm.twoId,
    threeId: this.queryForm.threeId || ''
  this.treeNodeLinkage(obj);
// 查询条件和el-tree显示联动
// cityId 为第一级id，twoId 为第二级，threeId 为第三级
treeNodeLinkage({refName, cityId, twoId , threeId}) {
  // 先将el-tree所有节点关闭
  let nodesMap = this.$refs[refName].store.nodesMap; // 拿到全部的node
  for(let key in nodesMap) {
    nodesMap[key].expanded = false;
  // 这里的第二级id，对应懒加载方法里 node.level === 2时候
  // 所以这里的newId拼接方法，按照当时key的拼接方法来
  let newId = cityId + twoId;
  this.expanded = [cityId, newId];
  if(threeId) {
    this.expanded.push(threeId);
步骤5：定位到查询的节点
 
添加定位方法 
思路：通过当前选中的节点样式   '.is-current' 进行定位，这里通过this.$refs.tree.setCurrentKey(key)方法，
对查询的节点进行选中。
下面的’.treeDome’ 为滚动的父元素 的 class名 
// 首先在上面的treeNodeLinkage方法里进行一些操作
/**  this.$refs.tree.setCurrentKey(null); // 清除上次的选中
	document.querySelector('.treeDome').scrollTop = 0; // 父盒子滚动条回到顶部
	this.$refs.tree.setCurrentKey(threeId); // 设置选中
	setTimeout(() => {
        this.toPositionTree();
    }, 500)
treeNodeLinkage({refName, cityId, twoId , threeId}) {
  // 先将el-tree所有节点关闭
  let nodesMap = this.$refs[refName].store.nodesMap; // 拿到全部的node
  for(let key in nodesMap) {
    nodesMap[key].expanded = false;
  // 这里的第二级id，对应懒加载方法里 node.level === 2时候
  // 所以这里的newId拼接方法，按照当时key的拼接方法来
  let newId = cityId + twoId;
  this.expanded = [cityId, newId];
  this.$refs.tree2.setCurrentKey(null); // 清除上次的选中
  document.querySelector('.treeDome').scrollTop = 0; // 父盒子滚动条回到顶部
  if(threeId) {
    this.expanded.push(threeId);
    	因为数据已加载，则可直接设置选中，如果未加载，可能会出现执行这段代码时，el-tree里数据还未拿到，
    	会导致下面的toPositionTree方法，一直拿不到'.is-current'元素，
    	所以在 :load="loadNode" 拿到数据的地方加上
	 	setTimeout(() => {
	      this.$refs.tree.setCurrentKey(this.filterText2);
	    }, 500)
	   执行完这个后，元素就能成功被选中，toPositionTree方法也能成功执行
    this.$refs.tree.setCurrentKey(threeId); 
toPositionTree() {
 // 这里因为数据是懒加载，可能一次找不到当前的节点，所以进行重复查询，查到为止
 if(document.querySelector('.is-current')) {
   let nodeOffsetTop = document.querySelector('.is-current').offsetTop;
   // console.log('.is-current', nodeOffsetTop);
   let tempH = document.querySelector('.treeDome').clientHeight / 2;
   if (nodeOffsetTop > tempH) {
     document.querySelector('.treeDome').scrollTop = nodeOffsetTop - tempH + 150;
     // console.log('.treeDome', document.querySelector('.treeDome').scrollTop);
 } else {
   setTimeout(() => {
     this.toPositionTree();
   },500)
其实这个联动，主要是搞懂el-tree的 node-key 和 default-expanded-keys 属性就行。
 简单来说，就是你想展开哪个节点，就把该节点node-key对应的字段放入default-expanded-keys对应的数组中。 
其他的就是对数据的处理
 把接口获取到的数据处理成你想要的样子，这是前端在很多时候都要做的事情
                    其实这个联动，主要是搞懂el-tree的node-key和属性就行。简单来说，就是你想展开哪个节点，就把该节点node-key对应的字段放入default-expanded-keys对应的数组中。其他的就是对数据的处理把接口获取到的数据处理成你想要的样子，这是前端在很多时候都要做的事情。
在el-tree 懒加载不兼容自带的查询，需要自己实现。
  <el-input clearable @keyup.native.enter="handelSearch" size="small" v-model="search"> </el-input>
 <el-tree  :data="treeData" ref=“tree” node-key="id"  lazy :load="loadNode"  />
 data() {
    return 
<el-form-item label="实体类型" prop="entityType">
  <el-popover placement="bottom" width="200" trigger="click"
 v-model="popoverVisible">
    <el-.
				El-Tree 不使用懒加载时，可以通过设置 `lazy` 属性为 `false` 来禁用懒加载功能。而对于展开节点时的加载效果，可以通过监听 `node-click` 事件，在该事件中进行数据加载，并在加载完成后修改节点的 `loading` 属性来显示加载效果。例如：
```html
<el-tree :data="treeData" :lazy="false" @node-click="handleNodeClick">
  <!-- ... -->
</el-tree>
```js
methods: {
  handleNodeClick(node, data) {
    if (data.children && data.children.length > 0) {
      // 如果节点已有子节点，则直接展开
      node.expanded = !node.expanded;
    } else {
      // 否则模拟异步加载数据
      node.loading = true;
      setTimeout(() => {
        data.children = [{ label: '子节点' }];
        node.loading = false;
        node.expanded = true;
      }, 1000);
在上述示例中，当节点被点击时会先判断该节点是否已有子节点，如果有则直接展开，否则通过 `setTimeout` 模拟异步加载数据，并在加载完成后将 `loading` 属性设为 `false` 显示加载效果，然后再将节点展开。您可以根据实际需要修改数据加载的方式和具体实现。