业务需求：

前端页面表格中包含多选框，用户可以根据需求对表格中的数据进行选择，示例如下：

需求.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:

希望文章内容可以帮助到大家，以上代码为个人的实现方式，若有不足还请各位职业大牛在评论区多多提出自己的宝贵意见。