el-tree懒加载点击一级节点后一键展开所有子节点

最新推荐文章于 2024-06-04 11:35:25 发布

路小飞'

最新推荐文章于 2024-06-04 11:35:25 发布

阅读量3.8k

点赞数 2

文章标签：前端 javascript elementui vue.js

本文链接：https://blog.csdn.net/qq_43202700/article/details/127283315

版权

因为数据量太大，前端选择使用el-tree的懒加载，但是甲方提出新需求，点击一级节点后要一键展开该节点下的所有子节点（包括二级三级四级...节点）。
之前非懒加载起效的 this.$refs.treeRef.store.nodesMap[No].expanded = true 也不起作用了，悲伤。
参考了半天发现可以利用 default-expanded-keys 属性，点击一级节点时，通过load函数请求接口，得到返参后将需要展开的 node-key 数组放入 default-expanded-keys。

<template>
  <div>
    <el-tree
      ref="treeRef"
      node-key="id"
      data="treeData"
      :default-expanded-keys="defaultExpandedNodes"
      lazy
      load="loadNode"
    />
  </div>
</template>

data() {
  return {
    defaultExpandedNodes: [],
  }
},

methods:{
  loadNode(node, resolve) {
    if (node.level === 0 || node.level === 1) {
      this.getTreeData(node.data)
    } else {
      if (node.data.children) {//存在子节点
        node.data.children.forEach(item => {
          this.defaultExpandedNodes.push(item.id)//展开其余的所有子节点
        })
        resolve(node.data.children);
      } else {//不存在子节点
        resolve([])
      }
    }
  }

  getTreeData(data) {
   this.defaultExpandedNodes = []
    return new Promise(resolve => {
      setTimeout(() => {
        let res = [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        res.forEach(item => {
          this.defaultExpandedNodes.push(item.id);//展开第二级节点
        })
        resolve(res)
      }, 1000)
    })
  }
}