解决vxe-table复选框翻页选中问题

解决vxe-table复选框翻页选中问题

根据vxe-table官方文档，想要保留勾选中的数据，我们的代码中需要设置“row-id”和:checkbox-config中的“reserve”属性。

vxe-table官方文档

简单写下html部分：

<vxe-grid
	row-id="id"
	:checkbox-config="{ labelField: '', highlight: true, trigger: 'row', reserve: true , range: true}"
	@checkbox-all="selectAllEvent"
    @checkbox-change="selectChangeEvent"
>
	<!--自定义表格内容-->
</vxe-grid>

因为项目都用到vxe-table，所有这里使用vue的混入应用的项目的所有页面表格中，在混入文件中写复选框的事件：

//定义数据，简单模拟
data() {
	return {
		/*table选中keys*/
		selectedRowKeys: [],
		/*table选中records*/
		selectionRows : [],
	}
}
//复选框事件(保留翻页选中的数据)
selectChangeEvent({ checked, records, reserves, row }) {
     // console.log(checked ? '勾选事件' : '取消事件')
     // console.log('当前选中的数据：' + records)
     // console.log('翻页时其他页的数据：' + reserves)
     // console.log('当前选中的数据行：' + row )
     //勾选选中时
     if (checked) {
     	//第一次选数据，还未进行翻页时
         if (reserves.length == 0){
             this.selectedRowKeys = records.map(v => v.id);
             this.selectionRows = records;
         }else {
             //id集合，翻页存在已选中的数据时,拼接新选中的数据
             this.selectedRowKeys = [...reserves.map(v => v.id),...records.map(v => v.id)];
             //数据集合，翻页存在已选中的数据时,拼接新选中的数据
             this.selectionRows = [...reserves,...records];
         }
     }else {
         //取消选中时
         let idIndex = this.selectedRowKeys.indexOf(row.id);
         if (idIndex > -1) {
             //删除取消选中删除指定元素id
             this.$delete(this.selectedRowKeys, idIndex);
         }
         
         let dataIndex = null;
         for(let i = 0; i < this.selectionRows.length; i++) {
             if (this.selectionRows[i].id == row.id) {
                 dataIndex = i;
                 break;
             }
         }
         //删除取消选中的元素整个对象
         this.$delete(this.selectionRows, dataIndex);
     }
 },
 //vxe复选框当前页全选中方法(保留翻页选中的数据)：
 selectAllEvent({ checked, records, reserves}) {
     // console.log(checked ? '勾选事件' : '取消事件')
     // console.log('当前选中的数据：' + records)
     // console.log('翻页时其他页的数据：' + reserves)
     //全选中时
     if (checked) {
     	 //第一次选数据，还未进行翻页时
         if (reserves.length == 0){
             this.selectedRowKeys = records.map(v => v.id);
             this.selectionRows = records;
         }else {
             //id集合，翻页存在已选中的数据时,拼接新选中的数据
             this.selectedRowKeys = [...reserves.map(v => v.id),...records.map(v => v.id)];
             //数据集合，翻页存在已选中的数据时,拼接新选中的数据
             this.selectionRows = [...reserves,...records];
         }
     }else {
         //取消全选时,直接将翻页数据赋值，当前页数据不用加上
         this.selectionRows = reserves;
         this.selectedRowKeys = reserves.map(v => v.id)
     }
 }

上面就实现了vxe-table表格复选框选中和全选中事件，在进行翻页选其他页的数据时，还能保留前面选中的数据的功能，有什么问题的话可以在评论区留言。