el-table 实现翻页多选

html结构

	<el-table
				:data="tableData"
				ref="tableRef"
				tooltip-effect="light"
				@selection-change="handleSelectionChange"
				:row-key="getRowKeys"
			>
  </el-table>

数据

                ids: [],
				listQuery: {
					page: 1,
					limit: 20,
				},
                tableData: [],

监听

	watch: {
			//监听翻页
			'listQuery.page': {
				handler(val) {
					this.setTabelData()
				}
			}
		},

方法

            getRowKeys(row) {
				return row.id
			}, 
            handleSelectionChange(val) {
				this.ids = val
			},           
            // 设置页面数据
			setTabelData() {
				this.selectedPreExisting(this.ids)
			},
			// 选中table已有数据
			selectedPreExisting(rows) {
				if (rows.length > 0) {
					//这里使用this.$nextTick是防止表格未渲染完成就执行，导致无法添加选中效果
					this.$nextTick(() => {
						rows.forEach((row) => {
							//判断row是否存在于当前tableData
							let selectedItem = this.tableData.find(
								(item) => item.id == row.id
							)
							if (selectedItem) {
								this.$refs.tableRef.toggleRowSelection(
									selectedItem,
									true
								)
							}
						})
					})
				} else {
					this.$refs.tableRef.clearSelection()
				}
			},