element tree树形结构设置默认展开几级

最新推荐文章于 2024-03-19 14:06:17 发布

晓柯爱

最新推荐文章于 2024-03-19 14:06:17 发布

阅读量607

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45799001/article/details/126393070

版权

1.设置node-key属性，用来作为唯一标识 node-key=“id”

2.设置default-expanded-keys属性，默认展开的节点的 key 的数组

页面

 <div class="tree">
       <el-tree :data="data5" node-key="id" ref="tree" @node-click="handleBucketClick" :default-expanded-keys="treeData">
         <span class="custom-tree-node" slot-scope="{ node }">
           <span>{{ node.label }} </span>
         </span>
       </el-tree>
</div>

data定义了一个数组treeData用于存放默认展开的节点的 key 的数组

data() {
    return {
      treeData:[]
    }
}

接口请求完调用

this.getDefaultShowNodes(3, this.data5) //第一个参数，展开的数量,第二个数据

    getDefaultShowNodes(num, children) {
      --num
      if (num >= 0) {
        for (let i = 0; i < children.length; i++) {
          this.treeData.push(children[i].id)
          if (children[i].children) {
            this.getDefaultShowNodes(num, children[i].children)
          }
        }
      }
    },