Element ui 中使用table組件實現分頁記憶選中

https://www.bbsmax.com/A/Ae5RMgPAJQ/

 

 上傳到了GitHub上一個示例，可供參考

https://github.com/wanglu05/element-ui-memory-page/

 

Element ui 中使用table組件實現分頁記憶選中

我們再用vue和element-ui，或者其他的表格的時候，可能需要能記憶翻頁勾選，那麼實現以下幾個方法就ok了

示例如下

1. <el-table :data="tableData" ref="table" @selection-change="handleSelectionChange">
2. <el-table-column type="selection"></el-table-column>
3. <el-table-column prop="personName" label="客戶名稱"></el-table-column>
4. <el-table-column prop="telphone" label="手機號"></el-table-column>
5. <el-table-column prop="idNo" label="身份證號"></el-table-column>
6. <el-table-column prop="linkTypes" label="客戶身份"></el-table-column>
7. </el-table>
8. <el-pagination :page-size="pagination.pageSize" @current-change="currentChange"
9. :current-page="pagination.pageNumber"
10. :page-sizes="pagination.pageSizes"
11. :total="pagination.totalRows"
12. @size-change='sizeChange'>
13. </el-pagination>

首先定義個data值

1. data () {
2. return {
3. multipleSelectionAll: [], // 所有選中的數據包含跨頁數據
   multipleSelection: [], // 當前頁選中的數據
   　　 idKey: 'personId', // 標識列表數據中每一行的唯一鍵的名稱(需要按自己的數據改一下)
   tableData: [] // 表格數據
   　　　 // 此處省略pagination的定義
   }

1. }

方法中定義以下：

1. methods : {
   // 設置選中的方法
2. setSelectRow() {
3. if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
4. return;
5. }
6. // 標識當前行的唯一鍵的名稱
7. let idKey = this.idKey;
8. let selectAllIds = [];
9. let that = this;
10. this.multipleSelectionAll.forEach(row=>{
11. selectAllIds.push(row[idKey]);
12. })
13. this.$refs.table.clearSelection();
14. for(var i = 0; i < this.tableData.length; i++) {
15. if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
    // 設置選中，記住table組件需要使用ref="table"
16. this.$refs.table.toggleRowSelection(this.tableData[i], true);
17. }
18. }
19. } ,
20. // 記憶選擇核心方法
21. changePageCoreRecordData () {
22. // 標識當前行的唯一鍵的名稱
23. let idKey = this.idKey;
24. let that = this;
25. // 如果總記憶中還沒有選擇的數據，那麼就直接取當前頁選中的數據，不需要後面一系列計算
26. if (this.multipleSelectionAll.length <= 0) {
27. this.multipleSelectionAll = this.multipleSelection;
28. return;
29. }
30. // 總選擇裏面的key集合
31. let selectAllIds = [];
32. this.multipleSelectionAll.forEach(row=>{
33. selectAllIds.push(row[idKey]);
34. })
35. let selectIds = []
36. // 獲取當前頁選中的id
37. this.multipleSelection.forEach(row=>{
38. selectIds.push(row[idKey]);
39. // 如果總選擇裏面不包含當前頁選中的數據，那麼就加入到總選擇集合裏
40. if (selectAllIds.indexOf(row[idKey]) < 0) {
41. that.multipleSelectionAll.push(row);
42. }
43. })
44. let noSelectIds = [];
45. // 得到當前頁沒有選中的id
46. this.tableData.forEach(row=>{
47. if (selectIds.indexOf(row[idKey]) < 0) {
48. noSelectIds.push(row[idKey]);
49. }
50. })
51. noSelectIds.forEach(id=>{
52. if (selectAllIds.indexOf(id) >= 0) {
53. for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
54. if (that.multipleSelectionAll[i][idKey] == id) {
55. // 如果總選擇中有未被選中的，那麼就刪除這條
56. that.multipleSelectionAll.splice(i, 1);
57. break;
58. }
59. }
60. }
61. })
62. },
63. currentChange(val){
64. // 改變頁的時候調用一次
65. this.changePageCoreRecordData();
    　　　　　　　　　this.pagination.pageNumber = val;
    　　　　　　　　　this.query();

1. 　　　　　　}, sizeChange(val){ // 改變每頁顯示條數的時候調用一次
   　　　　　　　　　this.changePageCoreRecordData();
   　　　　　　　　　this.pagination.pageSize = val;
   　　　　　　　　　this.query();
   },

1. handleSelectionChange (val) {
   // table組件選中事件,記得加上@selection-change="handleSelectionChange"
   this.multipleSelection = val;
   },
2. query () {
3. // 分頁查詢數據方法，在成功返回數據方法裏調用setSelectRow方法，使每次分頁查詢都能勾選中
4. $.ajax({...,
5. success:(res)=>{
   ......
6. setTimeout(()=>{
7. this.setSelectRow();
8. }, 200)
9. }
10. })
11. },
    　　　　　　　// 得到選中的所有數據
    getAllSelectionData () {

　　　　　　　　　  // 再執行一次記憶勾選數據匹配，目的是爲了在當前頁操作勾選後直接獲取選中數據

　　　　　　　　　　this.changePageCoreRecordData();

1. 　　　　　　　　　console.log(this.multipleSelectionAll)
   }

1. }

如果你的是自定義組件dialog彈窗裏面的表格選擇，如果想每次打開想選中，那麼就直接在props加一個值，然後加一個watch

1. props: [ "selectData"],
2. watch: {
3. 'selectData' (val) {
4. this.multipleSelectionAll = val;
5. }
6. },

 上傳到了GitHub上一個示例，可供參考

https://github.com/wanglu05/element-ui-memory-page/