有一个需求,我在使用elementui中的el-table,在我拿到接口数据后,对之前保存的数据进行选中状态
时间: 2024-02-21 07:59:09 浏览: 70
好的,你想实现的功能是在接口返回数据后,将之前保存的数据的选中状态还原到el-table中,是吗?如果是的话,你可以将之前保存的数据中选中的行的rowKey值记录下来,然后在接口返回数据后,遍历接口返回的数据,将rowKey值与之前保存的选中行的rowKey值进行比较,如果匹配成功,则将该行标记为选中状态。以下是示例代码:
```javascript
// 之前保存的数据
const savedData = [
{ id: 1, name: 'John', age: 30, selected: true },
{ id: 2, name: 'Mary', age: 25, selected: false },
{ id: 3, name: 'Peter', age: 40, selected: true },
]
// el-table的数据
const tableData = [
{ id: 1, name: 'John', age: 30 },
{ id: 2, name: 'Mary', age: 25 },
{ id: 3, name: 'Peter', age: 40 },
{ id: 4, name: 'Tom', age: 35 },
]
// 将之前保存的数据中选中的行的rowKey值记录下来
const selectedRowKeys = savedData
.filter(item => item.selected)
.map(item => item.id)
// 遍历el-table的数据,将rowKey值与之前保存的选中行的rowKey值进行比较,如果匹配成功,则将该行标记为选中状态
tableData.forEach(item => {
if (selectedRowKeys.includes(item.id)) {
item.selected = true
}
})
```
这样就可以将之前保存的数据的选中状态还原到el-table中了。
阅读全文