element的Table表格组件树形数据与非懒加载

1.代码实现

<template><div><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button></el-col></el-row><el-table v-if="refreshTable" :data="menuList" row-key="menuId" :default-expand-all="isExpandAll":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="menuName" label="名称" :show-overflow-tooltip="true" width="160"></el-table-column><el-table-column prop="orderNum" label="排序" width="60"></el-table-column><el-table-column label="创建时间" align="center" prop="createTime"><template slot-scope="scope"><span>{{ (scope.row.createTime) }}</span></template></el-table-column><el-table-column label="操作" align="center" fixed="right" min-width="220"><template slot-scope="scope"><el-button size="mini" type="primary" @click="clickHandle(scope.row)">查看</el-button></template></el-table-column></el-table></div>
</template><script>
export default {name: "TablePage2",data() {return {// 菜单表格树数据menuList: [{"createTime": "2023-10-23 11:39:03","menuId": 2104,"menuName": "菜单1","parentName": null,"parentId": 0,"orderNum": 0,"children": [{"createTime": "2023-10-23 11:39:03","menuId": 21041,"menuName": "菜单1-1","parentName": null,"parentId": 2104,"orderNum": 1,"children": []},{"createTime": "2023-10-23 11:39:03","menuId": 21042,"menuName": "菜单1-2","parentName": null,"parentId": 2104,"orderNum": 1,"children": []},]},{"createTime": "2023-10-23 11:39:03","menuId": 2105,"menuName": "菜单2","parentName": null,"parentId": 0,"orderNum": 1,"children": [{"createTime": "2023-10-23 11:39:03","menuId": 21051,"menuName": "菜单2-1","parentName": null,"parentId": 2105,"orderNum": 1,"children": []},]},{"createTime": "2023-10-23 11:39:03","menuId": 2106,"menuName": "菜单3","parentName": null,"parentId": 0,"orderNum": 2,"children": []}],// 是否展开，默认全部折叠isExpandAll: true,// 重新渲染表格状态refreshTable: true,};},methods: {/** 展开/折叠操作 */toggleExpandAll() {this.refreshTable = false;this.isExpandAll = !this.isExpandAll;this.$nextTick(() => {this.refreshTable = true;});},clickHandle(row) {console.log(row, '点击')},},
};
</script>