ant-design-vue中table组件复选框分页切换保留之前选中数据

ant-design-vue中table组件复选框分页切换保留之前选中数据

1、vue2的写法

（1）template片段

<a-table
   :dataSource="dataSource"
   :loading="loading"
   :columns="columns"
   :pagination="false"
   :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
   :row-key="(record) => record.orgCode"
  >
</a-table>
<a-pagination
   align="center"
   v-model:current="pagination.current"
   v-model:page-size="pagination.pageSize"
   :total="pagination.total"
   @change="handlePageChange"
   :show-total="(total) => `共 ${total} 条`"/>

（2）script片段

<script>
import { getOrgList } from '@/api/spotCheck'

export default {
	data() {
		return {
			dataSource: [],
			allDataSource: [],
			loading: false,
			columns: [
				{
					title: '序号',
					dataIndex: 'rowIndex',
					key: 'rowIndex',
					align: 'center'
				},
				{
					title: '机构名称',
					dataIndex: 'orgName',
					key: 'orgName',
					align: 'center'
				},
				{
					title: '机构等级',
					dataIndex: 'regionalLevelName',
					key: 'regionalLevelName',
					align: 'center'
				},
				{
					title: '机构性质',
					dataIndex: 'orgAtt',
					key: 'orgAtt',
					align: 'center'
				}
			],
			selectedRowKeys: [],
			allSelectedRows: { 0: [] },
			pagination: {
				current: 1,
				pageSize: 10,
				total: 0
			},
		}
	},
	methods: {
		reqOrgList() {
			this.loading = true
			getOrgList()
				.then((res) => {
					const {
						data: { records, total }
					} = res
					this.allDataSource = records
					this.pagination.total = total
					if (this.pagination.total > this.pagination.pageSize) {
						this.dataSource = result.slice(0, this.pagination.pageSize)
					} else {
						this.dataSource = result
					}
				})
				.finally(() => {
					this.loading = false
				})
		},
		// 复选框操作
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.allSelectedRows[this.pagination.current - 1] = selectedRows
		},
		// 分页操作
		handlePageChange(event) {
			this.dataSource = this.allDataSource?.slice(
				this.pagination.pageSize * (event - 1),
				this.pagination.pageSize * event
			)
			let allSelectRowsArr = []
			for (let key in this.allSelectedRows) {
				allSelectRowsArr.push(...this.allSelectedRows[key])
			}
			const allSelectKeys = allSelectRowsArr.map((item) => item.orgCode)
			if (allSelectKeys.length) {
				this.selectedRowKeys = this.dataSource
					?.filter((item) => allSelectKeys.includes(item.orgCode))
					?.map((it) => it.orgCode)
			}
		},
	}
}
</script>

2、vue3写法

（1）template片段

<a-table
   class="table-margin"
   :dataSource="dataSource"
   :columns="columns"
   :pagination="false"
   :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange }"
   :row-key="(record) => record.orgCode"
   :loading="tableLoading">
</a-table>
<a-pagination
    style="margin-top: 24px"
    align="center"
    v-model:current="pagination.current"
    v-model:page-size="pagination.pageSize"
    :showSizeChanger="false"
    :total="pagination.total"
    :show-total="(total) => `共 ${total} 条`"
    @change="getOrgInfoList"
/>

（2）script片段

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { get_userinfo} from '@/api/qualityControlManage/organization/organization'
const dataSource = ref([])
const columns = ref([
	{
		title: '序号',
		dataIndex: 'rowKey',
		key: 'rowKey',
		align: 'center'
	},
	{
		title: '机构名称',
		dataIndex: 'orgName',
		key: 'orgName',
		align: 'center'
	},
	{
		title: '机构编码',
		dataIndex: 'orgCode',
		key: 'orgCode',
		align: 'center'
	},
	{
		title: '机构等级',
		dataIndex: 'orgLevelName',
		key: 'orgLevelName',
		align: 'center'
	},
	{
		title: '机构性质',
		dataIndex: 'orgAtt',
		key: 'orgAtt',
		align: 'center'
	},
	{
		title: '机构管理员',
		dataIndex: 'orgAdmin',
		key: 'orgAdmin',
		align: 'center'
	},
	{
		title: '操作',
		dataIndex: 'operate',
		key: 'operate',
		align: 'center'
	}
])

let pagination = reactive({
	current: 1,
	pageSize: 10,
	total: 0
})
let tableLoading = ref(false)

const state = reactive({
	selectedRowKeys: [],
	allSelectedRows: {}
})

const onChange = (selectedRowKeys, selectedRows) => {
	state.selectedRowKeys = selectedRowKeys
	state.allSelectedRows[pagination.current] = selectedRows
}

onMounted(() => {
	getOrgInfoList()
})

// 获取机构信息列表
const getOrgInfoList = () => {
	tableLoading.value = true
	const params = {
		size: pagination.pageSize,
		current: pagination.current,
		orgName: orgNameValue.value
	}
	get_userinfo(params)
		.then((res) => {
			const {
				data: { records, total }
			} = res
			dataSource.value = records
			pagination.total = total
            // 当前界面数据复选框是否选中
			let allSelectRowsArr = []
			for (let key in state.allSelectedRows) {
				allSelectRowsArr.push(...state.allSelectedRows[key])
			}
			const allSelectKeys = allSelectRowsArr.map((item) => item.orgCode)
			if (allSelectKeys.length) {
				state.selectedRowKeys = dataSource.value
					?.filter((item) => allSelectKeys.includes(item.orgCode))
					?.map((it) => it.orgCode)
			}
		})
		.finally(() => {
			tableLoading.value = false
		})
}
</script>