Vue3 - Element Plus 树形表格组件 el-table 一键全部展开折叠功能，支持动态数据及懒加载点击父级才去请求的场景，Tree树状表格每行带有children的表格全部收起和折叠！

<template>
  <el-button @click="toggleAllRowsExpanded">
    {{ allRowsExpanded ? '折叠所有' : '展开所有' }}
  </el-button>
  <el-table
    :data="tableData"
    :expand-row-keys="expandRowKeys"
    row-key="id"
    lazy
  >
    <!-- 树形结构的其他列定义 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([/* 树形结构的数据 */]);
const expandRowKeys = ref([]);
const allRowsExpanded = ref(false);
 
const toggleAllRowsExpanded = () => {
  const ids = tableData.value.map(item => item.id);
  allRowsExpanded.value = !allRowsExpanded.value;
  expandRowKeys.value = allRowsExpanded.value ? ids : [];
};
</script>

这段代码提供了一个按钮，用于切换所有树形表格行的展开和折叠状态。toggleAllRowsExpanded 函数会根据当前状态来设置 expandRowKeys 的值，从而控制哪些行处于展开状态。这个例子假设每个数据项都有一个唯一的 id 属性作为 row-key 的值。