vue el-tree 默认展开第一个节点_el-tree默认展开第一级

vue 的树形控件 el-tree 可以用来方便地实现树形控件，但是官方文档中，关于控件的默认展开只有默认展开全部或者默认全部关闭，如下所示：

对于指定节点的展开，需要指定其id，从而通过 default-expanded-keys 设置默认展开的节点。
对于后台返回的数据，默认展开其第一层的第一个，其实很简单：对于获取到的后台数据，将其第一层节点添加到数组中，将 default-expanded-keys 绑定数组，从而设置默认展开的节点。
实际应用：默认展开第一层节点中的第一个节点：

<template>
  <section>
    <!-- 机构类型编码表 -->
    <el-row class="toolbar" style="width: 20%;height:600px" align="left">
      <div class='treeClass'>
        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"
         highlight-current node-key="id" :default-expanded-keys="treeExpandData">
        </el-tree>
      </div>
    </el-row>
  </section>
</template>
<script>
export default {
    data() {
      return {
        treeData:[], //后台返回的tree树列表
        treeExpandData:[], //自己定义的用于接收tree树id的数组
        provincialCenterId:'',
        defaultProps: {
          children: 'item',
          label: 'name',
        },
       }
    },
     created(){
      this.getEquipmentList()
    },
     methods: {
      // 获取树形结构默认展开节点
      getRoleTreeRootNode(provincialCenterId) {
        this.treeExpandData.push(provincialCenterId)      
        },
     //获取tree树列表
     getEquipmentList: function(params){
        this.listLoading = true
        this.$api.ckApi.treeList({typeTag:true}).then((res)=>{
          if(res.code==200){
            this.treeData = res.resultDownload;
            this.provincialCenterId = this.treeData[0].id //默认展开第一个节点
            this.getRoleTreeRootNode(this.provincialCenterId)
            this.listLoading = false
          }else{
            this.$message.error(res)
          }
        })
      },
     }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

效果图：