業(yè)務(wù)需求：
前端頁面表格中包含多選框爱葵，用戶可以根據(jù)需求對表格中的數(shù)據(jù)進(jìn)行選擇河劝，示例如下：
需求.png
存在問題：
前端需要將選擇的數(shù)據(jù)的標(biāo)識id傳給后臺惠啄，以便進(jìn)行相關(guān)的數(shù)據(jù)處理慎恒，由于數(shù)據(jù)量較大任内，頁面展示以分頁的形式進(jìn)行處理，那么融柬，當(dāng)進(jìn)行分頁后由于需要進(jìn)行新的數(shù)據(jù)請求死嗦，上一頁的選擇內(nèi)容就已經(jīng)被清空了，本文將以實際項目的代碼解析實現(xiàn)分頁保持選擇狀態(tài)粒氧。話不多說越走，上代碼：
表格：
在這里只是截取了其中的一列進(jìn)行演示：
<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中的數(shù)據(jù)：
data(){
checklist:[],//選中存放選中id
}
methods中的方法：
methods：{
// 列表選擇存儲id
checkListChanged(val,userId){
console.log(val,userId) //userId是后端返回的標(biāo)識字段
let index = this.checklist.indexOf(userId);
if(index === -1){
this.checklist.push(userId);
}else{
this.checklist.splice(index,1);
}
console.log(this.checklist)
},
}
總結(jié)：
el-checkbox的是否選中使用表達(dá)式判斷的方式進(jìn)行展示，使用methods中的checkListChanged方法即可將選中的userId存放在提前定義的數(shù)組checklist中靠欢，實際使用可根據(jù)自己的項目需求進(jìn)行形式的變更。
Tips:
希望文章內(nèi)容可以幫助到大家铜跑，以上代碼為個人的實現(xiàn)方式门怪，若有不足還請各位職業(yè)大牛在評論區(qū)多多提出自己的寶貴意見。
