Vue + Element UI 实战技巧：如何实现 el-table 重新加载数据后折叠所有展开行

在 Vue 中使用 Element UI 的 el-table 组件时，如果你想要在数据重新加载后折叠所有行的展开状态，你可以通过维护一个数据属性来追踪哪些行是展开的，并在数据更新时重置这个属性。

以下是一个简单的示例来说明如何实现这个功能：

1、在你的 Vue 组件的 data 函数中，定义一个数组来存储展开行的索引。

data() {
  return {
    tableData: [], // 你的表格数据
    expandedRows: [] // 用于追踪展开行的数组
  };
},

2、在 el-table 组件上使用 :row-key 属性来指定行的唯一键值，并在 @expand-change 事件中更新 expandedRows 数组。

<el-table
  :data="tableData"
  :row-key="rowKey"
  @expand-change="handleExpandChange"
>
  <!-- 你的表格列和其他配置 -->
</el-table>

3、在你的方法中定义 handleExpandChange 和一个用于重新加载数据的方法（比如叫做 loadData）。

methods: {
  handleExpandChange(row, expandedRows) {
    this.expandedRows = expandedRows;
  },
  loadData() {
    // 重新加载数据的逻辑
    // 假设你从 API 获取数据并更新 tableData
    // ...
    // 在数据加载完成后，重置 expandedRows
    this.expandedRows = [];
  }
},

4、你也可以使用 ref 属性来直接操作 el-table 组件，并在 loadData 方法中调用一个方法来折叠所有行。

<el-table
  :data="tableData"
  ref="table"
  :row-key="rowKey"
  @expand-change="handleExpandChange"
>
  <!-- 你的表格列和其他配置 -->
</el-table>

然后在 loadData 方法中添加以下代码：

methods: {
  // ... 其他方法
  loadData() {
    // 重新加载数据的逻辑
    // ...
    // 重置 expandedRows
    this.expandedRows = [];
    // 使用 ref 直接调用 el-table 的方法来折叠所有行
    this.$refs.table.store.states.expandedRows = [];
    this.$refs.table.store.states.expandRows = [];
  }
},

通过这种方式，每次调用 loadData 方法重新加载数据后，所有行的展开状态都会被折叠。注意，这里假设你已经在 el-table 中正确设置了 row-key，它通常是你数据中每行的一个唯一标识符。