記錄一下使用element ui table多選的過程，業(yè)務(wù)需求：分頁顯示table數(shù)據(jù)，選擇多行數(shù)據(jù)時价匠，翻頁后再回到有多選的頁面時，依然顯示多選的狀態(tài)呛每，保證選中的數(shù)據(jù)不隨翻頁而失效踩窖。
首先說一下項目環(huán)境，Vue2.0 + Vue Cli 3.x + element-ui 2.11
多選需要用到兩個table屬性：
Table Attributes
image
Table Events
image
<el-table
:data="tableData"
:header-row-style="{'background-color':'#1B3F8D'}"
:header-cell-style="{'text-align':'center'}"
:row-class-name="tableRowClassName"
:row-key="getRowKeys"
@selection-change="selectedChange"
v-loading="listLoading"
highlight-current-row
ref="multipleTable"
>
<el-table-column type="selection" :reserve-selection="true" min-width="55" />
...
</el-table>
之前找了很多方法晨横，大概都是需要在獲取數(shù)據(jù)后洋腮，判斷這一頁之前有沒有選中數(shù)據(jù)，如果有手形，讓選中的數(shù)據(jù)都調(diào)用toggleRowSelection()方法啥供，可能需求不同或element-ui最新的版本優(yōu)化過，經(jīng)實測库糠，不需要調(diào)用這個方法伙狐，只有在多選事件中將選中的數(shù)據(jù)存到數(shù)組中即可，每次都是返回的最新數(shù)據(jù)瞬欧。
methods定義getRowKeys方法贷屎，定義行數(shù)據(jù)的Key，因為我的數(shù)據(jù)中有id參數(shù)艘虎，這里使用id作為key：
getRowKeys(row) {
return row.id;
},
定義多選事件方法：
selectedChange: function(selected) {
this.selectionAll = selected;
},
完唉侄。
