Element UI 的 el-tree 组件e中默认展开前两层,设置 default-expanded-keys 属性来实现

发布于:2024-12-06 ⋅ 阅读:(22) ⋅ 点赞:(0)

在使用 Element UI 的 el-tree 组件时,如果你希望默认展开树的前两层节点,可以通过设置 default-expanded-keys 属性来实现。这个属性接受一个数组,数组中的值是需要默认展开的节点的 key。

首先,你需要确保你的每个树节点都有唯一的 key 值。然后,你可以通过遍历数据结构来收集前两层节点的 keys,并将这些 keys 传递给 default-expanded-keys 属性。

下面是一个简单的示例,展示如何设置 el-tree 默认展开前两层:

<template>
  <el-tree
    :data="data"
    :props="defaultProps"
    :default-expanded-keys="defaultExpandedKeys"
    node-key="id">
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '一级',
          children: [
            {
              id: 4,
              label: '二级',
              children: [
                {
                  id: 9,
                  label: '三级'
                },
                // 更多子节点...
              ]
            },
            // 更多子节点...
          ]
        },
        // 更多顶级节点...
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  computed: {
    defaultExpandedKeys() {
      const keys = [];
      this.data.forEach(item => {
        keys.push(item.id);  // 添加第一级节点
        if (item.children) {
          item.children.forEach(child => {
            keys.push(child.id);  // 添加第二级节点
          });
        }
      });
      return keys;
    }
  }
};
</script>

在这个例子中,defaultExpandedKeys 是一个计算属性,它遍历了 data 数组并收集了所有顶级节点(第一层)和它们直接子节点(第二层)的 id。这些 id 被用来作为 default-expanded-keys 的值,从而使得 el-tree 在初始化时自动展开这两层节点。

请根据你的实际数据结构调整上述代码以适应你的需求。如果你的数据结构有所不同,你可能需要调整遍历逻辑来正确获取前两层节点的 keys。


网站公告

今日签到

点亮在社区的每一天
去签到