vue + element-ui Table的數據多選，多頁選擇數據回顯，分頁記錄保存選中的數據。

　　業務的需要：我要對與會人員勾選，記錄所選的與會人員，並且點擊到別的頁面上時也要記錄所勾選的。第一次嘗試，每次點擊下一頁數據都會清空。然后我就去element ui官網查看了api.實現如下：

在table一定要定義以下事件和列表屬性：

　　1、row-key，

　　2、reserve-selection

　　handleSelectionChange這個事件的作用是我保存勾選數據的。

 <el-table @selection-change="handleSelectionChange" :row-key="getRowKeys">
　　......
 </el-table>

 

 

在data的return中定義：

getRowKeys(row) {
    return row.id;
},
因為我數據庫中有id這個字段，所以前台row里面有id作為唯一標識

因為使用了上面的表的屬性，在配合下面的列屬性：reserve-selection

<el-table-column type="selection" :reserve-selection="true" width="40" align="center">
</el-table-column>

type必須是selection。

因為要把勾選的數據傳到后台所以在methods定義：

handleSelectionChange(val) {
    this.multipleSelection = val;//勾選放在multipleSelection數組中
},

想要數據自己在multipleSelection數組中拿。這時基本結束了，功能實現了。

再說下數據的回顯：

　　先介紹下回顯核心：

　　

 rowMultipleChecked() {
 　　if(this.addForm.mtParticipantsId != null){//這里我先判斷從后台查的與會人員id的集合有沒有 不然下面length屬性會報錯。
     　　for (let j = 0; j < this.addForm.mtParticipantsId.length; j++) {//這里我用到了雙重for循環 this.pageUser這是所有人員信息
         　　for (let i = 0; i < this.pageUser.length; i++) {
                if (this.addForm.mtParticipantsId[j] == this.pageUser[i].id) {
                    if(this.$refs.bkUserTable!=undefined){//解決下面用bkUserTable不報錯 bkUserTable我是在table ref定義的
                        this.$refs.bkUserTable.toggleRowSelection(this.pageUser[i], true);//這個就是回顯的核心
                    }
                }
            }
        }
    }
 },

另外這個方法不能直接調用，會有問題的，應該是執行順序有關吧。在這里我用到了定時器：（打開彈框后在調用這個方法）

openbkPUser() {
     this.getNodeByDeptUser();
     this.form_title = "與會人員信息";
     if (this.stateSave != "2") {
     　　this.dialogFormVisible3 = true;
     　　setTimeout(() => {
    　　 this.rowMultipleChecked();
     　　}, 500)
     }
},