jeecg基于vxe-table组件封装的<j-vxe-table>,需要实现跨页勾选,保留之前页的勾选状态,并一键清空所有页的勾选
1,要保证所有页都勾选,需要设置 :checkbox-config="{reserve: true}"
注意:事件只能获取当页勾选的数据
获取其他页勾选的数据:this.$refs.ref_table_task.getCheckboxReserveRecords()
2,设置this.selectedRows储存所有勾选的rows
3,清空所有页勾选:分别清空当页勾选,其他页勾选
<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
<i class="anticon anticon-info-circle ant-alert-icon"></i>
已选择
<a style="font-weight: 600">{{ selectedRows.length }}</a>项
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
</div>
<j-vxe-table
ref="ref_table_task"
toolbar
:toolbarConfig="toolbarConfig"
row-selection
keep-source
:loading="loading"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:checkbox-config="{reserve: true}"
@pageChange="handlePageChange"
@selectRowChange="handleSelectRowChange"
/>
// (1)当选择的行变化时触发的事件
handleSelectRowChange(event) {
//当前页选中的数据
const currentSelectedRows = event.selectedRows
//其他页选中的数据
const otherSelectedRows = this.$refs.ref_table_task.getCheckboxReserveRecords()
const selectedRows = [...currentSelectedRows, ...otherSelectedRows];
//数组去重
const seenIds = new Set();
this.selectedRows = selectedRows.filter(item => {
if (!seenIds.has(item.id)) {
seenIds.add(item.id);
return true;
}
return false;
});
}
//(2)清空所有勾选
onClearSelected(){
//清空当页勾选
this.$refs.ref_table_task.clearCheckboxRow();
//清空其他页勾选
this.$refs.ref_table_task.clearCheckboxReserve();
this.selectedRows = []
}