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>
  

2. 效果图