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

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);
        }
      })
    },
}

注：this.roleList中的roleList为el-table的data属性值，$refs.roleList中的roleList为el-table的ref属性值。
实际上，我是使用了一个循环遍历来实现这样的效果。

文章借鉴

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