Vue2&Element-UI中Table树形结构默认全部展开和关闭的实现方案

Element-UI 文档地址

方案一使用文档中的属性 default-expand-all

1.default-expand-all这个属性只在列表第一次加载时生效 无法动态绑定
在网上查阅资料显示 是给el-table绑定一个v-if 通过$nextTick重新渲染表格
具体实现代码如下

 <div>
      <el-button type="primary" size="small" @click="allExpansion"
        >全部展开</el-button
      >
      <el-button type="primary" size="small" @click="allPack"
        >全部收起</el-button
      >
    </div>
     <el-table
      :data="dataList"
      row-key="idCard"
      border
      v-if="refTable"
      :tree-props="{ hasChildren: 'hasChildren', children: 'children' }"
      :default-expand-all="allTable"
    ></el-table>
 // 全部收起
    allPack() {
      this.allTable = false;
      this.refTable = false;
      this.$nextTick(() => {
        this.refTable = true;
      });
    },
    // 全部展开
    allExpansion() {
      this.allTable = true;
      this.refTable = false;
      this.$nextTick(() => {
        this.refTable = true;
      });
    },

表格数据量少可以使用数据过多或者层级过深时会有性能问题

方案二

1. 通过检查表格展开的元素样式会发现
展开的样式类名el-table__expand-icon el-table__expand-icon–expanded
思路 获取表格所有可以下拉的列表在注册点击事件触发
这个方案不会触发列表重新渲染 具体选择哪种看大家公司的业务需求

具体实现代码如下 

 // 全部展开方案2
    allExpansions() {
      const list = document.querySelectorAll(".el-table__expand-icon");
      for (let i = 0; i < list.length; i++) {
        if (!list[i].className.includes("el-table__expand-icon--expanded")) {
          list[i].click();
        } else {
          continue;
        }
      }
    },
    // 全部收起方案2
    allPacks() {
      const list = document.querySelectorAll(".el-table__expand-icon");
      for (let i = 0; i < list.length; i++) {
        if (!list[i].className.includes("el-table__expand-icon--expanded")) {
          continue;
        } else {
          list[i].click();
        }
      }
    },

最后放上全代码

<template>
  <div class="table">
    <div>
      <el-button type="primary" size="small" @click="allExpansion"
        >全部展开</el-button
      >
      <el-button type="primary" size="small" @click="allPack"
        >全部收起</el-button
      >
      <el-button type="primary" size="small" @click="allExpansions"
        >全部展开(2)</el-button
      >
      <el-button type="primary" size="small" @click="allPacks"
        >全部收起(2)</el-button
      >
    </div>
    <el-table
      :data="dataList"
      row-key="idCard"
      border
      v-if="refTable"
      :tree-props="{ hasChildren: 'hasChildren', children: 'children' }"
      :default-expand-all="allTable"
    >
      <el-table-column type="" prop="index" label="序号" />
      <el-table-column prop="name" label="姓名" min-width="140" />
      <el-table-column prop="idCard" label="证件号" show-overflow-tooltip />
      <el-table-column
        prop="sourceName"
        label="人员类型"
        show-overflow-tooltip
      />
      <el-table-column
        prop="streetName"
        label="所属街道"
        show-overflow-tooltip
      />
      <el-table-column
        prop="communityName"
        label="所属社区"
        show-overflow-tooltip
      />
    </el-table>
  </div>
</template>
<script>
import { indexData } from "@/utils/index";
import { columns } from "./data";
export default {
  data() {
    return {
      refTable: true,
      allTable: false,
      dataList: indexData(columns.data.records),
    };
  },
  methods: {
    // 全部收起
    allPack() {
      this.allTable = false;
      this.refTable = false;
      this.$nextTick(() => {
        this.refTable = true;
      });
    },
    // 全部展开
    allExpansion() {
      this.allTable = true;
      this.refTable = false;
      this.$nextTick(() => {
        this.refTable = true;
      });
    },
    // 全部展开方案2
    allExpansions() {
      const list = document.querySelectorAll(".el-table__expand-icon");
      for (let i = 0; i < list.length; i++) {
        if (!list[i].className.includes("el-table__expand-icon--expanded")) {
          list[i].click();
        } else {
          continue;
        }
      }
    },
    // 全部收起方案2
    allPacks() {
      const list = document.querySelectorAll(".el-table__expand-icon");
      for (let i = 0; i < list.length; i++) {
        if (!list[i].className.includes("el-table__expand-icon--expanded")) {
          continue;
        } else {
          list[i].click();
        }
      }
    },
  },
};
</script>

代码仓库地址
码云
github