el-table刷新后保持高亮并改变状态字段

**EL-Table 刷新后保持高亮并改变状态字段**

在实际的开发中，我们经常会遇到这样的需求：当表格数据发生变化时，需要刷新表格，并且保持当前选中的行高亮显示，同时更新状态字段。这个问题看起来简单，但是在实现上却有一些复杂性。

**解决方案**

为了解决这个问题，我们可以使用以下几种方法：

1. **使用 `el-table` 的 `highlight-current-row` 属性**
2. **手动控制高亮显示和状态更新**

### 方法一：使用 `el-table` 的 `highlight-current-row` 属性我们可以直接在表格配置中开启 `highlight-current-row` 属性，这样就能自动保持当前选中的行高亮显示。

html<template>
 <div>
 <el-table :data="tableData" style="width:100%" @selection-change="handleSelectionChange">
 <!-- ... -->
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [], // 表格数据 multipleSelection: [] //选中行的数据 }
 },
 methods: {
 handleSelectionChange(val) {
 this.multipleSelection = val;
 }
 }
}
</script>

<style scoped>
/* ... */
</style>

javascript// 刷新表格数据async refreshTable() {
 const response = await axios.get('/api/tableData');
 this.tableData = response.data;
}

// 切换高亮显示和状态更新async toggleHighlightAndStatus() {
 // ...
}

html<template>
 <div>
 <el-table :data="tableData" style="width:100%" @selection-change="handleSelectionChange">
 <!-- ... -->
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [], // 表格数据 multipleSelection: [] //选中行的数据 }
 },
 methods: {
 handleSelectionChange(val) {
 this.multipleSelection = val;
 },
 async refreshTable() {
 const response = await axios.get('/api/tableData');
 this.tableData = response.data;
 // 手动控制高亮显示和状态更新 this.toggleHighlightAndStatus();
 }
 }
}
</script>

<style scoped>
/* ... */
</style>

javascript// 切换高亮显示和状态更新async toggleHighlightAndStatus() {
 const currentRow = this.multipleSelection[0];
 // 高亮显示当前行 this.$refs.elTable.setCurrentRow(currentRow);
 // 更新状态字段 await axios.post('/api/updateStatus', { id: currentRow.id, status: '更新' });
}