el-table树形数据全部展开和收缩（toggleRowExpansion）

仰望天空的小小蜗牛

已于 2022-01-25 09:47:51 修改

阅读量1.7w

点赞数 8

分类专栏： element-ui 文章标签： elementui vue.js javascript

于 2021-12-13 16:32:01 首次发布

本文链接：https://blog.csdn.net/weixin_46724415/article/details/121908210

版权

element-ui 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

本文主要讲根据element-ui文档的toggleRowExpansion实现el-table树形数据全部展开和收缩

1.页面效果

在这里插入图片描述

2.HTML页面展示

树形数据：直接使用element-ui的demo数据

<div>
    <el-button type="primary" @click="toggleRowExpansion">
      全部{{ isExpansion ? "收缩" : "展开" }}
    </el-button>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        ref="dataTreeList"
      >
        <el-table-column prop="date" label="日期" sortable width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>

3.全部展开和收缩

根据element-ui文档的toggleRowExpansion
在这里插入图片描述
先在data里定义isExpansion为true，同时el-table的 default-expand-all默认全部展开，当点击按钮，this.isExpansion取反；

遍历得到row和布尔值isExpansion，通过ref找到table执行方法toggleRowExpansion(row, expanded)

methods: {
    // 切换数据表格树形展开
    toggleRowExpansion() {
      this.isExpansion = !this.isExpansion;
      this.toggleRowExpansionAll(this.tableData, this.isExpansion);
    },
    toggleRowExpansionAll(data, isExpansion) {
      data.forEach((item) => {
        this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);
        if (item.children !== undefined && item.children !== null) {
          this.toggleRowExpansionAll(item.children, isExpansion);
        }
      });
    },
  },