elementui table多选分页时保留原有选中项（vue2

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 改变时触发
————————————————
版权声明：本文为CSDN博主「qq_43628158」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43628158/article/details/128812823