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

相关推荐
pe7er6 分钟前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶14 分钟前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李30 分钟前
前端开发中的输出问题
开发语言·前端·javascript
Dolphin_海豚43 分钟前
一文理清 node.js 模块查找策略
javascript·后端·前端工程化
祝余呀1 小时前
HTML初学者第四天
前端·html
浮桥2 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥2 小时前
Vue框架之钩子函数详解
vue.js
七夜zippoe3 小时前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆3 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
晓13134 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript