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>