有时候需要弹出一个窗口带一个table，来分页多选；
比如弹出一个窗口来选人，人员信息是分页的
1 selection列reserve-selection使用起来，监听selection-change事件获得跨页选择的内容
首先选中的那一列就是边上的checkbox
<el-table
:data="pageinfo.records"
class="mini-table"
ref="userSelectTable"
border
style="width: 100%"
:height="270"
:max-height="270"
:row-key="getRowKeys"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" :reserve-selection="true">
1.1 实现row-key
下面是element-ui官方对row-key的解释:
行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
这个里是getRowKeys的实现，这类返回的是能够表示每一个人的pkId
getRowKeys(row) {
return row.pkId;
},
1.2 reserve-selection设置成true
下面是element-ui官方对reserve-selection的解释:
仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）
1.3 监听selection-change获得跨页选中的行的数据
handleSelectionChange (selectedRows) {
console.log(selectedRows)
},
1.3 clearSelection的实现
clearSelection() {
if (this.$refs["userSelectTable"]) {
this.$refs["userSelectTable"].clearSelection();
}
},
2 如果要之前选中的内容，再次在分页的table里面再次选中
需要监听select-all，select事件函数里面做一下处理
image.png
2.1 需要监听一下table的显示或者隐藏
2.1.1 增加一个multipleSelection来保存或者初始化已经选中的数据，还有一些props
//组件的属性
props: {
// 是否显示dialog + 用户选择的table
showDialog: {
type: Boolean,
default: false,
},
// 当前已经选中的用户
curSelectedUsers: {
type: Array,
default: null,
},
},
data() {
return {
// 用来保存当前的选中
multipleSelection: [],
};
},
// 计算属性
computed: {
// 根据当前的multipleSelection得到对应选中的pkId
curSelectedRowIds() {
let result = [];
if (this.multipleSelection && this.multipleSelection.length > 0) {
result = this.multipleSelection.map((user) => user.pkId);
}
return result;
},
},
2.1.2 监听table的显示或者隐藏，初始化multipleSelection的值
watch: {
showDialog: {
handler(newValue) {
if (newValue) {
this.multipleSelection = this.$_.cloneDeep(this.curSelectedUsers);
this.rowMultipleChecked();
} else {
this.clearSelection();
}
},
immediate: true,
deep: true,
},
},
2.2 需要监听select-all和select事件来
<el-table
:data="pageinfo.records"
class="mini-table"
ref="userSelectTable"
border
style="width: 100%"
:height="270"
:max-height="270"
:row-key="getRowKeys"
@select-all="handleSelectionChange"
@select="handleSelectionChange"
>
<el-table-column type="selection" width="55" :reserve-selection="true">
下面是handleSelectionChange的
/**
* @param selection 选中的rows
* @param changedRow 变化的row
*/
handleSelectionChange(selection, changedRow) {
// 检查有没有新增的，有新增的就push
if (selection && selection.length > 0) {
selection.forEach((row) => {
if (this.curSelectedRowIds.indexOf(row.pkId) < 0) {
this.multipleSelection.push(row);
}
});
}
// 如果当前的selection没有changedRow，表示changedRow被cancel了，
// 如果this.multipleSelection有这一条，需要splice掉
if (row && selection.indexOf(changedRow) < 0) {
if (this.curSelectedRowIds.indexOf(changedRow.pkId) > -1) {
for (let index = 0; index < this.multipleSelection.length; index++) {
if (row.pkId === this.multipleSelection[index].pkId) {
this.multipleSelection.splice(index, 1);
break;
}
}
}
}
// 如果当前一条都没有选中，表示都没有选中，则需要把当前页面的rows都遍历一下，splice掉没选中的
if (selection.length === 0) {
this.pageinfo.records.forEach((row) => {
let index = this.curSelectedRowIds.indexOf(row.pkId);
if(index > -1) {
this.multipleSelection.splice(index, 1);
}
});
}
},
2.3 每次翻页的时候，需要把已经选中的行toggleRowSelection(row, true)一下
// 分页查询的函数
query(pageInfo) {
this.pageinfo.isSearching = true;
UserApi.findBulletinUsers(genPageRequestVo(pageInfo))
.then((response) => {
this.pageinfo.isSearching = false;
this.pageinfo.total = response.data.total;
this.pageinfo.records = response.data.records;
this.pageinfo.current = response.data.current;
// 每次都调用一下rowMultipleChecked，来把已经选中的check一下
this.rowMultipleChecked();
})
.catch((e) => {
this.pageinfo.isSearching = false;
console.log("searchBulletin failed", e);
});
},
rowMultipleChecked() {
if (
this.curSelectedRowIds &&
this.curSelectedRowIds.length > 0 &&
this.pageinfo &&
this.pageinfo.records &&
this.pageinfo.records.length > 0
) {
this.$nextTick(() => {
// 触发一下选中
this.pageinfo.records.forEach((row) => {
if (this.curSelectedRowIds.indexOf(row.pkId) > -1) {
this.$refs["userSelectTable"].toggleRowSelection(row, true);
}
});
});
}
},
