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-columnprop="name"label="名称"width="180"></el-table-column><el-table-columnprop="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); // 添加当前节点的idif (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>