elementui tree 默认展开第一节点

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

小红同学5

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

阅读量4.7k

点赞数

分类专栏： elementui

本文链接：https://blog.youkuaiyun.com/xh_960125/article/details/114526927

版权

elementui 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在ElementUI的Tree组件中设置默认展开第一级节点的方法。通过在data中设置一个包含首级节点id的数组，并将该数组赋予默认展开属性，再结合watch事件监听实现节点动态展开。

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

代码如下

1.data设置存放id数组

2.默认展开属性赋值存放的id

3.监听watch事件

<template>
  <div class="app-container">
    <el-container class="userContainerDisplay">
      <el-aside class="leftContainer">
        <el-tree
          :data="treeList"
          :props="defaultProps"
          node-key="id"
          @node-click="handleNodeClick"
          :default-expanded-keys="defaultShowNodes"
          :highlight-current="true"
          ref="interfaceTree"
          :expand-on-click-node="false"
          class="leftTreeStyle"
        ></el-tree>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Industry",
  data() {
    return {
      treeList: [],
      defaultShowNodes: [], 
      defaultProps: {
        children: "children",
        label: "name",
      },   
    };
  },
  created() {
    this.getTreeData();
  },
  methods: {
    // 左侧树数据
    async getTreeData() {
      const { data } = await api.getTreeList(this.query);
      this.treeList = data;
      this.$nextTick(() => {
        this.$refs.interfaceTree.setCurrentKey(this.treeList[0].id);
      });
    },

    
  },
  // 默认认展开一级
  watch: {
    treeList: {
      handler() {
        this.treeList.forEach((item) => {
          this.defaultShowNodes.push(item.id);
        });
      },
      deep: true,
    },
  },
};
</script>