iview 表格多选 保留选中状态 切换分页勾选状态保留

问题描述：

iview 表格 添加复选框多选的功能，由于数据过大需要分页处理。每次切换分页后，之前选中的数据被清空了。

解决办法：

代码不详细介绍啦。。。 复制粘贴就能搞定。。。

<template>
	<div>
		<div class="table-div"> 
			<Table :columns="columns" :height="49 * REMFontSize" :data="tableList" @on-select-all="selectAll" @on-select-all-cancel="cancelAll" @on-select="TableSelectRow" @on-select-cancel="TableSelectCancelRow" />
		</div>
		<div class="pager">
			<Page :total="page.totalCount" show-total show-sizer transfer @on-change="onChange" @on-page-size-change="onPageSizeChange" />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 分页
				page: {
					// 总条数
					totalCount: 0,
					PageIndex: 1,
					PageSize: 10,
				},
				columns: [
					{
						type: 'selection',
						width: 60,
						key: 'ID',
						align: 'center'
					},
					{
						type: 'index',
						title: '#',
						key: 'index',
						align: 'center',
						width: 70
					},
					{
						title: '名称1',
						key: 'name1',
						align: 'center',
					},
					{
						title: '名称2',
						key: 'name2',
						align: 'center'
					},
					{
						title: '名称3',
						key: 'name3',
						align: 'center'
					},
				],
				// 表格数据
				tableList: [],
				// 选中的id集合
				selectEquipsIds: []
			}
		},
		methods: {
			// 判断是否选中 
			sortData() {
				if (this.selectEquipsIds.length) {
					this.tableList.forEach(ele => {
						if (this.selectEquipsIds.includes(ele.ID)) ele._checked = true;
					})
				}
			},
			// 选中一行
			TableSelectRow(selection, row) {
				if (!this.selectEquipsIds.includes(row.ID)) {
					this.selectEquipsIds.push(row.ID);
					 
				}
			},
			// 取消选中一行
			TableSelectCancelRow(selection, row) {
				var _index = this.selectEquipsIds.indexOf(row.ID);
				if (_index != -1) {
					this.selectEquipsIds.splice(_index, 1);
					 
				}
			},
			// 选中所有
			selectAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectRow(null, this.tableList[i]);
				}
			},
			// 取消选中所有
			cancelAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectCancelRow(null, this.tableList[i]);
				}
			},
			// 翻页查询
			onChange(param) {
				this.page.PageIndex = param;
				this.search();
			},
			// 选择分页数
			onPageSizeChange(param) {
				this.page.PageSize = param;
				this.search();
			},
			// 查询表格数据 
			search() {
				调用接口的方法.(info).then(res => {
					this.tableList = res.data;
					this.page.totalCount = res.Total;
					this.sortData();
				}).catch(error => {
					console.log(error);
				})
			},  
		},
	}
</script>