element的Table表格组件树形数据与非懒加载

最新推荐文章于 2024-08-09 16:16:30 发布

小白_ysf

最新推荐文章于 2024-08-09 16:16:30 发布

阅读量763

点赞数 10

分类专栏： Element 文章标签： javascript 前端 vue.js elementui

本文链接：https://blog.youkuaiyun.com/weixin_41549971/article/details/135409174

版权

本文介绍了如何在Vue项目中使用el-table组件实现一个可展开/折叠的菜单列表，展示了如何管理表格数据和处理展开/折叠操作的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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-