VUE+ElementUI 实现 el-table树形结构的全部展开和全部收回功能

最新推荐文章于 2024-09-12 09:46:44 发布

默唁

最新推荐文章于 2024-09-12 09:46:44 发布

阅读量3.9k

点赞数 6

分类专栏： VUE JS

本文链接：https://blog.csdn.net/Mr_Chp/article/details/118389007

版权

VUE 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

本文介绍如何使用 VUE 和 ElementUI 在 el-table 中实现树形结构的全部展开与全部收回功能。通过自定义按钮与方法，结合 toggleRowExpansion 方法，实现了对表格树形结构的便捷控制。

摘要由CSDN通过智能技术生成

VUE+ElementUI 实现 el-table树形结构的全部展开和全部收回功能

文章目录

- 背景
- 实现思路

背景

ElementUI官方提供了el-table的树形结构展示方式。
通常使用树形结构时，会需要“全部展开”和“全部收回”的按钮功能，便于我们能够方便对数据表格的操作。比如下图的实现效果：

在这里插入图片描述

实现思路

官方文档中给出了表格级别的方法，在Table Methods中，可以找到 toggleRowExpansion 方法，其具体含义参见官网释义。

该方法可以实现表格中某一行的展开或者收缩功能，那么我们就借用此方法来实现所有行的功能，也是非常简单的了。

废话不多说，直接上代码：

按钮

	<el-col :span="1.5">
        <el-button
          type="primary"
          plain
          :icon="openFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          size="mini"
          @click="toggleRowExpansion(openFlag)"
        >{{openFlag ? '收起' : '展开'}}</el-button>
     </el-col>

表格

<el-table
      v-loading="loading"
      :data="roleList"
      ref="roleList"
      row-key="roleId"
      :default-expand-all="openFlag"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!--<el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="角色编号" prop="roleId" width="120" />
      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
</el-table>

实现方法

data() {
    return {
      // 树层级打开
      openFlag: true,
    }
},
methods: {
	/** 展开收缩 */
    toggleRowExpansion(isExpansion){
      this.openFlag = !isExpansion;
      this.toggleRowExpansion_forAll(this.roleList,this.openFlag);
    },
    toggleRowExpansion_forAll(data,isExpansion){
      data.forEach(item=>{
        this.$refs.roleList.toggleRowExpansion(item,isExpansion);
        if(item.children != undefined && item.children != null){
          this.toggleRowExpansion_forAll(item.children,isExpansion);
        }
      })
    },
}