vxe-table选中状态刷新不丢失
时间: 2023-08-02 10:29:05 浏览: 521
在 vxe-table 中,为了保持选中状态刷新不丢失,可以使用以下两种方法之一:
1. 使用 `keep-source` 属性
在 vxe-table 标签中添加 `keep-source` 属性,这样在数据刷新时,选中状态会被保留。
```html
<vxe-table :data="tableData" keep-source>
<!-- 表格列配置 -->
</vxe-table>
```
2. 在数据更新时手动保存选中状态
在数据更新时,手动保存选中状态,然后在数据刷新后重新设置选中状态。可以在 `data` 或 `watch` 中监听数据变化,然后使用 `getCheckboxRecords` 方法获取选中的行数据,保存在一个变量中,在数据刷新后使用 `setCheckboxRow` 方法重新设置选中状态。
```html
<vxe-table :data="tableData">
<!-- 表格列配置 -->
</vxe-table>
```
```js
export default {
data() {
return {
tableData: [],
selectedRows: [] // 保存选中的行数据
}
},
watch: {
tableData: {
handler() {
// 在数据更新时保存选中状态
this.selectedRows = this.$refs.table.getCheckboxRecords()
},
deep: true
}
},
methods: {
handleRefresh() {
// 在数据刷新后重新设置选中状态
this.$nextTick(() => {
this.$refs.table.setCheckboxRow(this.selectedRows)
})
}
}
}
```
以上两种方法都可以保持选中状态刷新不丢失,选择哪一种方法取决于具体情况。
阅读全文