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

相关推荐
I_Am_Me_8 分钟前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~15 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ18 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z24 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴27 分钟前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁1 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜1 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4041 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple1 小时前
typescript里面正则的使用
开发语言·javascript·正则表达式