业务需求：
前端页面表格中包含多选框，用户可以根据需求对表格中的数据进行选择，示例如下：
需求.png
存在问题：
前端需要将选择的数据的标识id传给后台，以便进行相关的数据处理，由于数据量较大，页面展示以分页的形式进行处理，那么，当进行分页后由于需要进行新的数据请求，上一页的选择内容就已经被清空了，本文将以实际项目的代码解析实现分页保持选择状态。话不多说，上代码：
表格：
在这里只是截取了其中的一列进行演示：
<el-table
ref="multipleTable"
:data="tableData2"
height="255px"
style="width: 100%"
:header-cell-style="{fontSize:'16px',color:'#def9ff',fontFamily:'MicrosoftYaHei',background:'transparent'}"
:row-class-name="tableRowClassName"
:cell-class-name="addclass"
>
<el-table-column prop="date" label="邀约" align="center">
<template slot="header">
<div class="slot">
<span class="tit1">邀约</span>
</div>
</template>
<template slot-scope="scope">
<el-checkbox :value="checklist.indexOf(scope.row.userId) !== -1" @change="checkListChanged($event,scope.row.userId)"></el-checkbox>
</template>
</el-table-column>
</el-table>
data中的数据：
data(){
checklist:[],//选中存放选中id
}
methods中的方法：
methods：{
// 列表选择存储id
checkListChanged(val,userId){
console.log(val,userId) //userId是后端返回的标识字段
let index = this.checklist.indexOf(userId);
if(index === -1){
this.checklist.push(userId);
}else{
this.checklist.splice(index,1);
}
console.log(this.checklist)
},
}
总结：
el-checkbox的是否选中使用表达式判断的方式进行展示，使用methods中的checkListChanged方法即可将选中的userId存放在提前定义的数组checklist中，实际使用可根据自己的项目需求进行形式的变更。
Tips:
希望文章内容可以帮助到大家，以上代码为个人的实现方式，若有不足还请各位职业大牛在评论区多多提出自己的宝贵意见。
