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

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

  • 参考:https://bixin.blog.csdn.net/article/details/108233103?spm=1001.2101.3001.6650.10&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-10-108233103-blog-124826254.pc_relevant_layerdownloadsortv1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-10-108233103-blog-124826254.pc_relevant_layerdownloadsortv1&utm_relevant_index=12如何使用elementui中的树形组件在懒加载模式中会默认展开N层;需求如下:用tree组件进行懒加载默认会展开4层.剩下的使用异步加载.