在 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// ...// 在数据加载完成后，重置 expandedRowsthis.expandedRows = [];}
},
4、你也可以使用 ref 属性来直接操作 el-table 组件，并在 loadData 方法中调用一个方法来折叠所有行。
<el-table:data="tableData"ref="table":row-key="rowKey"@expand-change="handleExpandChange"
><!-- 你的表格列和其他配置 -->
</el-table>
然后在 loadData 方法中添加以下代码：
methods: {// ... 其他方法loadData() {// 重新加载数据的逻辑// ...// 重置 expandedRowsthis.expandedRows = [];// 使用 ref 直接调用 el-table 的方法来折叠所有行this.$refs.table.store.states.expandedRows = [];this.$refs.table.store.states.expandRows = [];}
},
通过这种方式，每次调用 loadData 方法重新加载数据后，所有行的展开状态都会被折叠。注意，这里假设你已经在 el-table 中正确设置了 row-key，它通常是你数据中每行的一个唯一标识符。