el-tree 展开指定层级节点

最新推荐文章于 2025-03-11 14:17:15 发布

new Vue()

最新推荐文章于 2025-03-11 14:17:15 发布

阅读量5.7k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_45444035/article/details/131511187

版权

文章介绍了如何在ElementUI中配置el-tree组件，通过设置defaultExpandedArr和node-key属性，结合数据结构，实现在页面加载时仅展开树的第一级节点。示例代码展示了如何初始化数据并动态添加默认展开的节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例：只展开一级节点

代码实现：

element UI 文档

html代码

defaultExpandedArr 是重点需要加node-key


    <el-tree
      :props="defaultProps"
      :data="treeData"
      :default-expanded-keys="defaultExpandedArr"
      node-key="id"
      ref="tree"
    ></el-tree>

js代码

export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeData: [],
      defaultExpandedArr: [],
    };
  },
  mounted() {
    // 相当于请求接口
    this.init();
  },
  methods: {
    init() {
      // 获取到接口数据 之后赋值
      this.treeData = [
        {
          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",
            },
          ],
        },
      ];
      // 给 你想展开的数据 进行 push 到 defaultExpandedArr内
      // 我这个展示的是一级的展开 在想往下级 可以继续循环嵌套之后循环children 进行push
      this.treeData.forEach((item) => {
        this.defaultExpandedArr.push(item.id);
      });
    },
  },
};