#iview table跨页多选遇到的坑
iview table和page组件组合使用时,跨页多选时,会记不住选过的选项,比如说,在第1页选择了2项,然后点击第2页,再回到第一页时选中的项没有显示出来。
解决方法:
核心就是切换时重新给选中的项勾上,
核心代码:
// 跨页重新选中
setChecked() {
let objData = this.$refs["table"].objData;
for (let index in objData) {
if (this.courseIds.has(objData[index].id)) {
objData[index]._isChecked = true;
}
}
},
具体实现:
<Table
ref="table"
:columns="columns"
:data="tableList"
@on-select="handleSelectRow"
@on-select-cancel="handleCancelRow"
@on-select-all="handleSelectAll"
@on-select-all-cancel="handleSelectAll"
></Table>
<span class="selectSpan">当前已选中数:{{ selectSum }}</span>
<Page
:total="pagination.total"
:page-size="pagination.size"
:current="pagination.number"
show-sizer
show-total
@on-change="changePage"
@on-page-size-change="changePageSize"
:styles="{ float: 'right', marginTop: '10px' }"
/>
data() {
return {
formData: {
workflowNo: "",
workflowName: "all",
dateRange: [],
processType: "",
processTypeList: [],
courseName: ""
},
courseIds: new Set(),
selectSum: 0,
};
},
computed: {
...mapGetters({
userInfo: "auth/userInfo",
pagination: "studentsSignUp/pagination",
tableList: "studentsSignUp/list"
}),
columns() {
return [
{
type: "selection",
width: 80,
tooltip: true,
align: "center"
},
{
title: "培训班编号",
key: "courseNo",
// tooltip: true,
align: "center",
minWidth: 230
},
{
title: "培训班名称",
key: "courseName",
// tooltip: true,
align: "center",
minWidth: 230,
render: (h, params) => {
return h(
"Button",
{
on: {
click: () => this.btnHandler(params.row)
},
props: {
type: "text",
size: "small"
}
},
params.row.courseName
);
}
},
{
title: "班主任",
key: "implementerName",
tooltip: true,
align: "center",
minWidth: 100
},
{
title: "主办部门(单位)",
key: "baseOrgName",
tooltip: true,
align: "center",
minWidth: 160
},
{
title: "开班时间",
tooltip: true,
key: "startDate",
align: "center",
width: 160,
render: (h, params) => {
const dateString =
params.row.startDate != undefined
? dayjs(new Date(params.row.startDate)).format("YYYY-MM-DD")
: "-";
return h("span", dateString);
}
},
{
title: "结班时间",
tooltip: true,
key: "endDate",
align: "center",
width: 160,
render: (h, params) => {
const dateString =
params.row.endDate != undefined
? dayjs(new Date(params.row.endDate)).format("YYYY-MM-DD")
: "-";
return h("span", dateString);
}
}
];
}
},
created() {
this.setPagination({ ...this.pagination, number: 1, size: 10 });
this.query();
},
methods: {
...mapActions({
queryUserinfo: `auth/${REQ_QUERY_USERINFO}`,
loadCousrePage: `studentsSignUp/${REQ_IMPLEMENT_LOAD_PAGE}` //培训实施培训班分页查询
}),
...mapMutations({
setPagination: `studentsSignUp/${SET_SINGLE_ACCOUNTING_PAGINATION}`
}),
// 查询列表
async query() {
await this.queryUserinfo(window.config.SzhxyAppId);
let params = {
action: "",
isEnd: "0",
courseName: this.formData.courseName,
startDate:
this.formData.dateRange[0] == undefined ||
this.formData.dateRange[0] == ""
? ""
: dayjs(this.formData.dateRange[0]).format("YYYY-MM-DD HH:mm:ss"),
endDate:
this.formData.dateRange[1] == undefined ||
this.formData.dateRange[0] == ""
? ""
: dayjs(this.formData.dateRange[1]).format("YYYY-MM-DD HH:mm:ss"),
types: this.types,
implementerDeptId: this.userInfo.deptId,
pagination: this.pagination
};
this.loadCousrePage(params).then(res => {
if (res.responseHeader.status == 1) {
this.$nextTick(() => {
this.setChecked();
});
}
});
},
//查询
search() {
this.setPagination({ ...this.pagination, number: 1 });
this.query();
},
// 切页
changePage(page) {
this.setPagination({ ...this.pagination, number: page });
this.query();
},
//改变页大小
changePageSize(size) {
this.setPagination({ ...this.pagination, size, number: 1 });
this.query();
},
// 选中某一行
handleSelectRow(selection, row) {
this.courseIds.add(row.id);
this.selectSum = this.courseIds.size;
},
// 取消某一行
handleCancelRow(selection, row) {
this.courseIds.delete(row.id);
this.selectSum = this.courseIds.size;
},
// 全选/取消全选
handleSelectAll(selection) {
//当前页取消全选
if (selection.length == 0) {
var data = this.$refs["table"].data;
data.forEach(item => {
if (this.courseIds.has(item.id)) {
this.courseIds.delete(item.id);
}
});
} else {
//当前页全选
this.selectList = selection;
this.selectList.forEach(value => {
this.courseIds.add(value.id);
});
}
//当前选中数
this.selectSum = this.courseIds.size;
},
// 跨页重新选中
setChecked() {
let objData = this.$refs["table"].objData; //拿到当前table的值
for (let index in objData) {
if (this.courseIds.has(objData[index].id)) {
objData[index]._isChecked = true; //重新勾选
}
}
},
courseHandler() {
let selectedCoureseIds = [...this.courseIds]; //将选中的班级编号转换为数组
if (selectedCoureseIds == false) {
this.$Message.error("请至少选择一个培训班!");
return;
}
let query = {
courseId: JSON.stringify(selectedCoureseIds),
isString: true,
type: "shiShi"
};
this.$router.push({
path: "/admin/teacherFee",
query
});
}
}
};```
参考:
[https://blog.csdn.net/qq_19343775/article/details/90031761](https://blog.csdn.net/qq_19343775/article/details/90031761)