element-ui表格跨页选择数据

1.template部分

• 为table组件添加ref=‘table’
• 绑定数据源 :data=‘list’
• 添加select和select-all事件（事件处理函数为handleSelect）

<template>
	<div>
		<el-table ref='table' :data="list" max-height="600"
			 @select="handleSelect" @select-all='handleSelect'>
			<el-table-column fixed="left" type="selection" width="55" align="center" />
			<el-table-column label="商品名称" align="center" prop="name" min-width="200" />
			<el-table-column label="商品条码" align="center" prop="id" min-width="180" />
			<el-table-column label="商品单位" align="center" prop="unit" min-width="180" />
		</el-table>
	</div>
</template>

2.js部分

• 在data函数中定义全局选中数据的变量allIds
• 在data函数中定义数据源的变量list

<script>
	export default {
		data() {
			return {
				allIds: [],//当前选中数据的id数组
				list: [], //表格数据源
			}
		}
	}
</script>

• 请求列表数据，并根据allIds判断当前列表中是否有选中的数据，如果有则默认选中

<script>
	export default {
		data() {
			return {
				allIds: [],//当前选中的数据
				list: [], //表格数据源
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				axios.get('xxxxx').then(res => { //模拟数据请求
					this.list = response.data.rows; //数据源
					
					//循环数据列表，判断当前数据的id是否存在于allIds中，如果存在则默认选中
					this.$nextTick(() => {
						this.list.map((item) => {
							if(this.allIds.includes(item.id)) {
								this.$refs.table.toggleRowSelection(item,true)
							}
						})
					})
				})
			}
		}
	}
</script>

• handleSelect事件函数的实现
  监听单选、全选事件
  判断allIds数据里面是否包含当前分页的数据，如果包含，则将当前页面数据的id从allIds 里删除
  然后将当前页选中的数据重新push到allIds数组里

<script>
	export default {
		methods: {
			// 跨页选择
			handleSelect(selection) {
				let allIds = [...this.allIds];
				let delIds = this.list.map(item => item.id);
				for(let i = 0; i < this.allIds.length; i++) {
					let id = allIds[i];
					if(delIds.includes(id)) {
						allIds.splice(i,1);
						i--;
					}
				}
				
				selection.map(item => {
					if(!allIds.includes(item.id)) {
						allIds.push(item.id)
					}
				})
				this.allIds = [...allIds]
			}
		}
	}
</script>

3.全部代码

<template>
	<div>
		<el-table ref='table' :data="list" max-height="600"
			 @select="handleSelect" @select-all='handleSelect'>
			<el-table-column fixed="left" type="selection" width="55" align="center" />
			<el-table-column label="商品名称" align="center" prop="name" min-width="200" />
			<el-table-column label="商品条码" align="center" prop="id" min-width="180" />
			<el-table-column label="商品单位" align="center" prop="unit" min-width="180" />
		</el-table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				allIds: [],//当前选中的数据
				list: [], //表格数据源
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				axios.get('xxxxx').then(res => { //模拟数据请求
					this.list = response.data.rows; //数据源
					
					//循环数据列表，判断当前数据的id是否存在于allIds中，如果存在则默认选中
					this.$nextTick(() => {
						this.list.map((item) => {
							if(this.allIds.includes(item.id)) {
								this.$refs.table.toggleRowSelection(item,true)
							}
						})
					})
				})
			},
			
			// 跨页选择
			handleSelect(selection) {
				let allIds = [...this.allIds];
				let delIds = this.list.map(item => item.id);
				for(let i = 0; i < this.allIds.length; i++) {
					let id = allIds[i];
					if(delIds.includes(id)) {
						allIds.splice(i,1);
						i--;
					}
				}
				
				selection.map(item => {
					if(!allIds.includes(item.id)) {
						allIds.push(item.id)
					}
				})
				this.allIds = [...allIds]
			}
		}
	}
</script>