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>
2. 效果图