Element 、Avue 表格跨页选中后的回显处理

leile_wkle

已于 2023-10-11 21:23:05 修改

阅读量535

点赞数

文章标签： java 前端服务器

于 2023-10-11 21:18:30 首次发布

本文链接：https://blog.csdn.net/leile_wkle/article/details/133779039

版权

本文介绍了在Vue应用中，如何在跨页选择后正确处理表格数据回显，包括使用$refs.crud.toggleRowSelection方法和确保item来自表格数据列表。关键是在created生命周期钩子中，异步获取表格数据后用$nextTick更新选中状态。

摘要由CSDN通过智能技术生成

跨页选择后数据回显处理注意事项：

1、this.$refs.crud.toggleRowSelection(item, true) // 回显数据遍历切换选中状态即可计数表格选中项

2、需要表格回显打勾 item必须是表格数据列表中的某一条

所以只需在页面初始化时created里表格数据请求后（如：请求表格数据函数返回一个Promise）执行下面代码即可

created() {
// 用于初始化回显数据

this.fetchMaterialList().then(() => {
this.$nextTick(() => {
let tableIds = this.tableData.map(o => o.id)
this.selectData.forEach(item => {
if (tableIds.includes(item.id)) {
let obj = this.tableData.find(o => o.id == item.id)
// obj 必须是表格里的某条数据才回显
this.$refs.crud.toggleRowSelection(obj, true)
} else {
// 用来给当前表格已选择项计数
this.$refs.crud.toggleRowSelection(item, true)
}
})
})
})
},