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

相关推荐
齐 飞3 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹20 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry43 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟10091 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js