Element分頁多選功能

html

除了:row-key=“getRowKeys”，多選框的

第一列一定要加上type="selection" 和 :reserve-selection="true"

不加發現：回上一頁發現勾選的框被清空了

reserve-selection，Element上解釋為：僅對 type=selection 的列有效，類型為 Boolean，為 true 則會在資料更新之後保留之前選中的資料（需指定 row-key）

<el-table ref="multipleTable" :data="tableData" border v-loading="tableLoading"  @selection-change="handleSelectionChange" :row-key="getRowKeys" >
 <el-table-column type="selection" :reserve-selection="true" width="40px" fixed="left"></el-table-column>
           

js

handleSelectionChange(val) {
   this.SelectionList = val;
},
// 分頁多選功能的rowKey擷取
getRowKeys(row) {
  return row.id//id
},
// 完成清空跨頁多選
clearSelection() {
  if (this.$refs.multipleTable) {
    this.$refs.multipleTable.clearSelection();
  }
},