解决el-table全选取消全选及翻页数据保存问题
2022-11-18 本文已影响0人
上海_前端_求内推
1,html代码
image.png
2,字段说明,tableData2为请求的列表数据,roleUserLists为回显数据
// 全选/取消全选
Allofthem(val, row) {
// 如果为空,则为清除选项状态,此时将table中的所有内容都从saveCheckList移除
if (val && val.length == 0) {
this.tableData2.forEach((row) => {
// 从保存项saveCheckList里面寻找,如果找到了row则删除
let fitemIndex = this.roleUserLists.findIndex((item) => {
return item.userCode == row.userCode;
});
// 找到了就删除掉
if (fitemIndex >= 0) {
this.roleUserLists.splice(fitemIndex, 1);
}
});
} else if (val && val.length != 0 && this.roleUserLists.length != 0) {
// 如果不为空,且this.saveCheckList也不为空则从val里面找
val.forEach((row) => {
// 从保存项saveCheckList里面寻找,如果找到了row则删除,如果没找到则添加
let fitemIndex = this.roleUserLists.findIndex((item) => {
return item.userCode == row.userCode;
});
// 没找到就push进去
if (fitemIndex < 0) {
this.roleUserLists.push(row);
}
});
} else if (val && val.length != 0 && this.roleUserLists.length == 0) {
val.forEach((row) => {
this.roleUserLists.push(row);
});
}
//
},
// 单选/取消单选
Radioselect(val, row) {
debugger;
// that.roleUserLists
let selected = val.length && val.indexOf(row) !== -1; //selected为true时为选中,false时为未选中
if (selected) {
this.roleUserLists.push({
userCode: row.userCode,
userName: row.userName,
});
console.log(this.roleUserLists);
} else {
// 从保存项roleUserLists里面寻找,如果找到了row则删除,如果没找到则添加
let fitemIndex = this.roleUserLists.findIndex((item) => {
return item.userCode == row.userCode;
});
// 找到了就删除掉
if (fitemIndex >= 0) {
this.roleUserLists.splice(fitemIndex, 1);
}
}
//
},
3,加载勾选的列表及勾选回显
GetuserList() {
var that = this;
that.loading = true;
that.$axios
.get(that.$baseService.getqualityuserslit, {
params: that.formselect2,
})
.then(function (res) {
that.total2 = res.data.totalCount;
that.tableData2 = JSON.parse(JSON.stringify(res.data.items));
that.loading = false;
var rows = that.roleUserLists;
that.$nextTick(() => {
that.tableData2.forEach(function (row, index) {
rows.forEach(function (row2, index2) {
if (row2.userCode == row.userCode) {
that.$refs.table2.toggleRowSelection(row, true);
}
});
});
});
})
.catch(function (error) {
that.loading = false;
});
},