<Table
:columns="columns"
:data="list"
ref="purchaseTable"
@on-selection-change="selectTable"
@on-select-cancel="selectCancel"
/>
添加两个事件 参考iview官方文档https://www.iviewui.com/components/table
selectTable(arr) {
arr.forEach((item) => {
if (!this.selectEmploy.includes(item.id)) {
this.selectEmploy.push(item.id);
}
});
},
维护一个数组 selectEmpoyee 用于存放checked选中后的表格数据 确保id的唯一性
selectCancel(selection, row) {
this.selectEmploy = this.selectEmploy.filter((item) => {
return item != row.id;
});
},
多选情况下点击取消时会触发该方法 接受两个参数 第一个为选中项 第二个为取消项
将取消项的id移除即可 方法有很多
回显
async pageChange(val) {
let result = await saffAPI.queryEmpPositionPage({
currPage: val,
pageSize: 20,
model: {
...this.form,
companyType: this.companyType,
companyId: this.companyId,
roleId: this.id,
excludeRole: this.type == "add",
orgIds: this.selectdArr,
},
});
//回显
this.selectEmploy.forEach(item=>{
result.records.forEach(element=>{
if(element.id==item){
this.$set(element,'_checked',true)
}
})
})
this.list = result.records;
this.queryPage.total = result.total;
},
触发翻页按钮时 判断请求到的数据的id值 是否在维护的selectEmpoyee数组里面 iview提供了_checked的属性 设置true即为选中