vxe-table 可单选，可多选， 以及分页刷新后选中消失问题

<vxe-table
	ref="xTable"
	:data="tableObj.data"
	:loading="tableObj.loading"
	border
	resizable
	auto-resize
	height="100%"
	size="small"
	highlight-current-row
	highlight-hover-row
	show-overflow="tooltip"
	show-header-overflow="tooltip"
	row-id="id"
	:row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
	:radio-config="{ reserve: true, trigger: 'row' }"
	:checkbox-config="{ reserve: true, trigger: 'row' }"
	@radio-change="handleRadioChange"
	@checkbox-all="checkboxAll"
	@checkbox-change="changeCheckBox"
>
	<vxe-column type="radio" width="80" align="center" :visible="!multiple">
		<template #header>
			<vxe-button type="text" @click="clearRadioRow">取消选中</vxe-button>
		</template>
	</vxe-column>
	<vxe-column type="checkbox" width="80" align="center" :visible="multiple"></vxe-column>
	<vxe-table-column field="sname" title="姓名" min-width="150" align="left"></vxe-table-column>
</vxe-table>

// 打开弹框，传入回显的数据
open(data) {
	if (!this.multiple) {
		this.selectObj = this.$XEUtils.clone(data, true)
	} else {
		this.selectArr = this.$XEUtils.clone(data, true)
	}
	this.dialogObj.show = true
	this.getTableData()
},

// 获取表格
getTableData() {
	this.tableObj.data = res.data
	this.copyData = res.data // 当前端过滤查询条件，需要复制一份
	
	// 单选且已经选过
	if (!this.multiple && this.selectObj.id) {
		const find = this.tableObj.data.find((i) => i.id === this.selectObj.id)
		this.$refs.xTable.setRadioRow(find)
	}
	// 多选且已选过
	if (this.multiple && this.selectArr.length > 0) {
		this.$refs.xTable.setCheckboxRow(this.selectArr, true)
	}

	//  当数据量多时       :checkbox-config="{ checkField: 'checked', reserve: true, trigger: 'row' }"
	// this.tableObj.data = res.data.map((i) => {
	// 	return { ...i, checked: false }
	// })
	// // 单选且已经选过
	// if (!this.multiple && this.selectObj.id) {
	// 	const find = this.tableObj.data.find((i) => i.id === this.selectObj.id)
	// 	this.$refs.xTable.setRadioRow(find)
	// }
	// // 多选且已选过
	// if (this.multiple && this.selectArr.length > 0) {
	// 	this.$refs.xTable.setCheckboxRow(this.selectArr, true)
	// 	this.tableObj.data = res.data.map((i) => {
	// 		return {
	// 			...i,
	// 			checked: this.selectArr.find((item) => item.id === i.id)
	// 		}
	// 	})
	// }
	setTimeout(() => {
		this.$refs.xTable && this.$refs.xTable.refreshColumn()
	}, 200)
},

// 名称input查询
doSearch() {
	// 第一种 前端过滤
	const str = this.searchStr.trim()
	if (!!str) {
		this.tableObj.data = this.copyData.filter((i) => i.name.includes(str))
	} else {
		this.tableObj.data = this.copyData
	}
	setTimeout(() => {
		this.$refs.checkTable.setCheckboxRow(this.selectArr, true)
	}, 200)
	
	// 第二种 接口查询 this.getTableData()
},

// 单选change
handleRadioChange() {
	this.selectObj = this.$refs.xTable.getRadioRecord()
},

// 取消单选选中
clearRadioRow() {
	this.$refs.xTable.clearRadioRow()
	this.selectObj = {}
},

// 复选框change
changeCheckBox({ checked, row }) {
	const findIndex = this.selectArr.findIndex((i) => i.id === row.id)
	// 当前行已勾选，现取消勾选，从数组中删除
	if (findIndex > -1 && !checked) {
		this.selectArr.splice(findIndex, 1)
		// 没有全选的情况下，限制选中个数
		// if (this.selectArr.length <= 1) {
		// 	 this.$message.warning('至少选1个！')
		// 	 this.$refs.checkTable.toggleCheckboxRow(row)
		// } else {
		// 	 this.selectArr.splice(findIndex, 1)
		// }
	}
	// 当前行未勾选，现勾选，加入数组
	if (findIndex <= -1 && checked) {
		this.selectArr.push(row)
		// 没有全选的情况下，限制选中个数
		// if (this.selectArr.length >= 5) {
		// 	 this.$message.warning('最多选5个！')
		// 	 this.$refs.checkTable.toggleCheckboxRow(row)
		// } else {
		// 	 this.selectArr.push(row)
		// }
	}
},

// 复选框全选
checkboxAll({ checked }) {
	this.tableObj.data.map((item) => {
		const findIndex = this.selectArr.findIndex((i) => i.id === item.id)
		if (findIndex > -1 && !checked) {
			this.selectArr.splice(findIndex, 1)
		}
		if (findIndex <= -1 && checked) {
			this.selectArr.push(item)
		}
	})
},