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

相关推荐
ai小鬼头22 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's29 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络1 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.2 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
喜欢敲代码的程序员2 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis