element框架table多选分页时保留原有选中项（vue2和vue3均适用）

element中table表格多选+分页

1、表格多选
手动添加一个 el-table-column，设 type 属性为 selection 即可；

<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange"
>
	<el-table-column type="selection" width="55" />
	<el-table-column property="name" label="Name" width="120" />
</el-table>
</template>
<script>
export default {
  name: "eleTable",
  data() {
    return {
    	tableData: [{
			  id:1,
			  date: "2016-01-02",
			  name: "王小虎",
			  address: "上海市普陀区金沙江路 1518 弄"
			},
			{
			  id:2,
			  date: "2017-03-04",
			  name: "王虎",
			  address: "上海市普陀区金沙江路 1517 弄"
			},
			{
			  id:3,
			  date: "2017-04-01",
			  name: "王小",
			  address: "上海市普陀区金沙江路 1519 弄"
			},
			{
			  id:4,
			  date: "2016-05-03",
			  name: "李三",
			  address: "上海市普陀区金沙江路 1516 弄"
			}
		],
    },
    methods:{
	    //用户多选
		handleSelectionChange(e){
			sendForm.value.deptList = e;
		},
    }
}
</script>

2、分页时翻页保留原有选中项涉及属性

• row-key【table属性】：行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。
• reserve-selection【Table-column 属性】：仅对 type=selection 的列有效， 请注意， 需指定 row-key 来让这个功能生效

<template>
<el-table
:data="selTabelData"
:row-key="selRowKey"
@selection-change="handleSelectionChange"
>
	<el-table-column type="selection" align="center" width="55" reserve-selection />
	<el-table-column property="name" label="Name" width="120" />
</el-table>
<el-pagination
layout="prev, pager, next"
hide-on-single-page
:current-page="selHoverPage"
:page-size="selPagesize"
:total="6"
@current-change="selPageChange"
>
</el-pagination>
</template>
<script>
export default {
  name: "eleTable",
  data() {
  	selTabelData:[],//多选表格数据
  	selHoverPage:1, //多选下分页当前选中页数
	selPagesize:2, //多选下分页每页条数限制 
  },
  mounted() {
  	this.selTabelData = this.tableData.slice(0,this.selPagesize);
  },
  methods:{
  	//为行设置独有key
  	selRowKey(row){
		// console.log(row);
		return row.id
	},
	//多选下分页事件
	selPageChange(e){
		console.log(e);
		//重新调取接口获取数据，或者前端处理均可
		//this.selTabelData = this.tableData.slice(this.selPagesize*(e-1),this.selPagesize*e);
	},
	

  }
}
</script>

pagination分页属性：

• current-page：当前页数【number】
• page-size：每页显示条目个数，支持 .sync 修饰符【number】

pagination分页事件：

• current-change：current-page 改变时触发