Element ui 中使用table组件实现分页记忆选中

深碍√TFBOYSˉ_ 2023-02-21 06:34 15阅读 0赞

[https://www.bbsmax.com/A/Ae5RMgPAJQ/][https_www.bbsmax.com_A_Ae5RMgPAJQ]

** 上传到了GitHub上一个示例，可供参考**

[https://github.com/wanglu05/element-ui-memory-page/][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/][https_github.com_wanglu05_element-ui-memory-page]

[https_www.bbsmax.com_A_Ae5RMgPAJQ]: https://www.bbsmax.com/A/Ae5RMgPAJQ/
[https_github.com_wanglu05_element-ui-memory-page]: https://github.com/wanglu05/element-ui-memory-page/