需求：
1、table表格多選，並且切換分頁之後能記住上一頁的選項；
2、回顯數據，切換分頁之後再切換回來依然能回顯數據；
3、點擊選項，未保存數據，切換頁面後再切換回來初始化數據勾選狀態；
4、全選，取消全選數據正常變化。
5、使用了dialog來顯示table；
6、後臺分頁。
使用el-table：
1、el-table方法：select和select-all 、toggleRowSelection和clearSelection
2、el-table-column類型：type="selection"
3、分頁組件：Pagination（將el-pagination封裝過一層）
代碼：
邏輯代碼說明在最下面。
<el-dialog
title="產品列表"
width="69%"
:visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:destroy-on-close="true"
:before-close="handleClose"
>
<el-divider></el-divider>
<el-table
ref="multipleTable"
row-class-name="pointer"
:data="productList.list"
@select="handleSelectionChange"
@select-all="handleAllChange"
>
<el-table-column type="selection" align="center" width="55" />
<el-table-column label="方案狀態">
<template slot-scope="scope">{{ scope.row.schemaStatustext || '--' }}</template>
</el-table-column>
<el-table-column label="產品方案名稱">
<template slot-scope="scope">{{ scope.row.schemaName || '--' }}</template>
</el-table-column>
</el-table>
<div style="text-align: right">
<pagination
v-show="productList.total > 0"
:total="productList.total"
:page.sync="listQueryPage1"
:limit.sync="listQueryLimit1"
@pagination="getQuerypageps"
/>
</div>
<el-row>
<el-button type="default" @click="exit">退出</el-button>
<el-button type="primary" @click="save">保存</el-button>
</el-row>
</el-dialog>
data() {
return {
productList:{},
echoList: [],
visible: false
};
},
// 以下方法在methods中
methods:{
// 顯示dialog框
showproductsList() {
this.dialogVisible = true;
// 獲取回顯數據列表
this.getchannelRelas();
// 獲取分頁列表
this.getQuerypageps();
},
// 關閉dialog框
exit() {
// 清空未保存的勾選、取消狀態
this.$refs.multipleTable.clearSelection();
this.visible = false;
},
// 點擊dialog右上角關閉圖標或者點擊ESC按鍵，隱藏dialog框時觸發。
handleClose(down) {
this.$refs.multipleTable.clearSelection();
down();
}
// 分頁獲取table列表，每次切換頁碼時都會執行該方法
getQuerypageps() {
this.$store.dispatch('channel/querypageps', {
page: 1,
limit: 10,
queryCondition: {}
})
.then(res => {
const { status, data } = res;
if (status === 200) {
this.productList = { ...data };
this.$nextTick(() => {
this.productList.list.forEach(item => {
// 重點： 在當前分頁列表中查詢與回顯數據是否有一致的id，一致則勾選數據回顯
// toggleRowSelection(item, true)：設置當前行數據爲選中狀態
if (this.echoList.includes(item.id)) {
this.$refs.multipleTable.toggleRowSelection(item, true);
}
});
});
}
});
},
// 獲取回顯數據
getchannelRelas() {
this.$store.dispatch('channel/channelRelas', {
id: this.channelleaseId
})
.then(res => {
const {status, data } = res;
if (status === 200 && data) {
// 篩選回顯數據的id，生成數組，根據id來勾選數據
this.echoList= data.map(item => item.id);
}
});
},
// 選擇關聯產品：打勾或取消
handleSelectionChange(selecteds, row) {
if (!this.echoList.includes(row.id)) {
// 回顯數據裏沒有本條，把這條加進來(選中)
this.echoList.push(row.id);
} else {
// 回顯數據裏有本條，把這條刪除(取消選中)
this.echoList.forEach((id, index) => {
if (id === row.id) {
this.listId.splice(index, 1);
}
});
}
},
// 全選、取消全選
handleAllChange(selecteds) {
if (selecteds.length > 0) {
selecteds.forEach(item => {
if (!this.echoList.includes(item.id)) {
this.echoList.push(item.id);
}
});
} else {
this.productList.list.forEach(item => {
this.echoList.forEach((id, index) => {
if (id === item.id) {
this.echoList.splice(index, 1);
}
});
});
}
},
}
以上部分就是核心代碼，理解流程邏輯，就能明白分頁、多選、回顯的真諦了。
回顯數據：
顯示dialog時獲取echoList（回顯數據）以及產品列表（productList）第一頁數據。其實這裏應該使用async和await方式，因爲兩個函數是異步操作，無法判斷先後順序，先不管這個。在獲取productList後循環判斷是否與echoList匹配，如果匹配則使用this.$refs.multipleTable.toggleRowSelection(item, true)方式勾選數據，當切換分頁的時候還會繼續執行以上的判斷。回顯數據就寫完了。
單項勾選以及取消勾選，全選以及取消全選：
單項勾選操作方法：handleSelectionChange，當點擊checkbox時，循環判斷echoList中是否有當前行信息，若是沒有，則說明是選中狀態，push進echoList中；若是存在當前行信息，則說明是取消勾選，則將echoList中當前行id刪除。
全選操作方法：handleAllChange，全選方法有一個參數selecteds，這是一個選中項數組，記錄了有多少條選中項；當進行全選操作時，判斷selecteds數組的length，若length>0，循環selecteds判斷echoList數組中是否與selecteds中id匹配，若不匹配，則表示新增選中項，循環判斷是爲了去除重複項，還有一種簡單的去除數組重複項的方法，使用Set：Array.from(new Set(this.echoList))；若length===0，則代表取消勾選項，這時候一定要循環productList，判斷echoList中的id是否與productList中的id是否匹配，若匹配，則刪除取消項。
當前操作與回顯數據操作結合使用，則切換分頁記住勾選取消狀態便成功了。
關閉dialog框清除未保存過的狀態
當勾選或取消勾選時，未進行保存，則關閉頁面重新進來時，應當初始化勾選的狀態，未保存過的狀態不應該存在。則可以使用**this.$refs.multipleTable.clearSelection()**方法來初始化數據。
若有問題，隨時歡迎。