vue+el-table 一键展开与折叠

<template>
  <div class="app-container">
    <el-button
      size="mini"
      @click.native="openTable(true)"
      >展开</el-button
    >
    <el-button
      size="mini"
      @click.native="openTable(false)"
      >折叠</el-button
    >

    <el-table
      ref="table"
      :data="listData"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      row-key="companyId"
      stripe
    >
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  components: {
  
  data() {
    return {
      isOpen:false,
      // 表格树数据
      listData: [],
    };
  },
  created() {
    this.$nextTick(() => {
      // this.getList();
      this.getTreeData()
    });
  },
  methods: {
    // 获取树形数据
    getTreeData() {
      getCompanyTree()
        .then((res) => {
          this.listData = res.data || [];
          this.tableLoading = false
        })
        .catch(() => {});
    },
    openTable(a){
     if(this.isOpen===a){
        return
      }
      this.isOpen = !this.isOpen
      this.$nextTick(()=>{
        this.handleArr(this.listData,this.isOpen)
      })
    },
    handleArr(arr,isOpen){
      arr.forEach(i=>{
        this.$refs.table.toggleRowExpansion(i,isOpen)
        if(i.children){
          this.handleArr(i.children,isOpen)
        }
      })
    }
  }
	}
}

</script>