新增
使用:row-key
编辑
主要是回显数据，如果使用
:row-key,会造成取消了，但是翻页后，无法取消的问题。
- 给表格使用
select和select-all事件去选择 - 然后把选择的数据给请求，使用
this.$refs.multipleTable.toggleRowSelection(item, true)
// 获取需要回显的数据
this.checkboxData = []
const deviceList = val.deviceIds.split(",").map(Number);
if (deviceList.length > 0) {
this.checkboxData = deviceList;
}
//select事件
handleSelect(selection, row) {
let selectBool = selection.length && selection.indexOf(row) !== -1;
//取消勾选
if (!selectBool) {
this.checkboxData.forEach((item, i) => {
if (item === row.id) {
this.checkboxData.splice(i, 1);
}
});
} else {
// 选中
this.checkboxData.push(row.id);
}
},
//select-all 事件
// 全选
if (selection.length > 0) {
this.checkboxData = this.checkboxData.concat(
Array.from(new Set(selection.map((item) => item.id)))
);
} else {
// 取消全选
this.tableData.forEach((item) => {
this.checkboxData.forEach((val, i) => {
if (item.id === val) {
this.checkboxData.splice(i, 1);
}
});
});
}
//勾选渲染
getList(params).then(res=>{
this.tableLoading = false;
this.tableData = res.data.records;
this.pagers.total = res.data.total;
this.$nextTick(() => {
this.tableData.forEach((item) => {
this.checkboxData.forEach((val) => {
if (item.id === val) {
this.$refs.multipleTable.toggleRowSelection(item, true);
}
});
});
});
})