1. 程式人生 > 其它 >Element-Ui實現分頁table快取勾中資料

Element-Ui實現分頁table快取勾中資料

1、在el-table上設定 row-key 屬性

<el-table
      ref="tableRef"
      v-loading="loading"
      :data="tableData"
      height="calc(100vh - 152px)"
      row-key="id"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
    .....
</el-table>

2、對 type=selection 的列,設定reserve-selection屬性(該屬性預設為false)

...
<el-table
      ref="tableRef"
      v-loading="loading"
      :data="tableData"
      height="calc(100vh - 152px)"
      row-key="id"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        fixed
        :reserve-selection="true"
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        fixed
        align="center"
        type="index"
        label="序號"
        width="55"
      />
    .....
</el-table>
...

4、至此分頁的table切換pageNum時,可以實現快取選中狀態的資料。

5、存在一個特殊情況需要處理:如果使用者輸入了過濾條件進行檢索,但是之前選中的資料被過濾掉了,此時對於使用者來說是不知道系統將上次選中的資料也包含到這次勾選的資料中。

第一次勾選的資料

解決方案:

在使用者重新查詢的方法中,清空之前選中的資料。

...
searchBtn() {
	this.loading = true
	...
	// 查詢後清除先前選中的資料,防止之前選中的資料被過濾掉,但是還儲存this.$refs.tableRef.selection這個選中列表中。
	this.$refs.tableRef && this.$refs.tableRef.clearSelection() 
    this.loading = false
}
...