el-table树状表格,默认展开第一个节点的每一层

效果如图

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    :expand-row-keys="expandRowKeys"
    row-key="id"
    @expand-change="handleExpandChange"
  >
    <el-table-column
      prop="name"
      label="名称"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="value"
      label="值"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "一级1",
          value: "A",
          children: [
            {
              id: 2,
              name: "二级1-1",
              value: "A-1",
              children: [
                { id: 3, name: "三级1-1-1", value: "A-1-1" },
                { id: 4, name: "三级1-1-2", value: "A-1-2" }
              ]
            },
            {
              id: 5,
              name: "二级1-2",
              value: "A-2",
              children: [
                { id: 6, name: "三级1-2-1", value: "A-2-1" }
              ]
            }
          ]
        },
        {
          id: 7,
          name: "一级2",
          value: "B",
          children: [
            {
              id: 8,
              name: "二级2-1",
              value: "B-1",
              children: [
                { id: 9, name: "三级2-1-1", value: "B-1-1" }
              ]
            }
          ]
        }
      ],
      expandRowKeys: [], // 保存展开的行的key
    };
  },
  methods: {
    // 递归函数来获取每层的第一个节点id 
   
    getFirstNodeKeys(data) {
      let keys = [];
      data.forEach(item => {
        keys.push(item.id); // 添加当前节点的id
        if (item.children && item.children.length) {
          keys = keys.concat(this.getFirstNodeKeys(item.children)); // 递归获取子节点的第一个
        }
      });
      return keys;
    },
    // 处理展开行的变化
    handleExpandChange(row, expandedRows) {
      // 可选处理扩展展开事件
    }
  },
  created() {
    // 初始化时设置默认展开每一层第一个节点
     // 注意!!!展开节点id数组必须是字符串的
    this.expandRowKeys = this.getFirstNodeKeys(this.tableData);
  }
};
</script>

<style scoped>
</style>