元素实现表分页数据选择选择所有完美的批处理操作

后台管理系统中的列表页面一般具有对列表数据进行批量操作的功能，如批量删除、批量删除等。

在前面的项目中，简单地使用了元素框架中的常规属性和事件。一次偶然的机会，我了解到一家公司的内部框架在Element框架的基础上实现了一些插件功能，为表格改进了很多功能。当时我没有抓住机会看源代码是怎么实现的。现在我有点后悔。没关系，我是一点一点体会到的。

实现的功能有：

分页数据选择选择所有数据(这个页面不是元素框架选择的！1.分页数据选择

一开始我以为只是分页的时候把之前选择的数据存储在一个列表里，选择的时候再映射。当你自己写代码的时候，你会发现并没有那么简单。百度之后，你会发现有两个属性被忽略了

行键保留选择

代码截图：

事件代码：

Getrowkeys (row) {return row。execid}这样就可以通过selectionChange方法获取页面中所选数据的变化，并将所选数据保存在列表中

选择更改(行){这。清单=行} 2。选择所有数据

元素框架中有一个全选事件，用于选择此页面上的所有数据。但是在项目中，经常说是对所有的数据进行操作，比如批量删除(删除所有的数据，这个权限有点大)

实施思路：

选中所有复选框。选中后，前端会向后台传递一个参数Flag:1，后台就知道这是对所有数据的操作。同时，前后之间也不需要巨大的数据传输。El-checkbox v-model=' all check ' @ change=' all check event '全选。/el-checkbox选中所有复选框，需要选中当前页面上的所有数据。将页面翻到另一页。该页面的数据也全部被选中(收听当前页面的数据)。AllCheckEvent () {If (this。all check){这个。测试列表。foreach (row={this。参考文献。记录表。togglerowselection (row，true) }) } else { this。$ refs . recordtable . clearselection()} } watch : { testlist : { handler(value){ if(this . all check){ let that=this let len=that .核对表. length value . foreach(row={ for(let I=0；我透镜；i ) { if (row.execId===that .核对表[i]。execId) {那个。$ refs . recordtable . toggleRowselection(row，True) break} else {that。参考文献。可记录的。togglerowselection (row，true)}})}}，deep : true}}选中所有复选框，同时，两页已经翻过来，选中的数据是两页数据。如果您取消一行数据的选择状态，则您将取消所有选择。当前选择的数据应该是：已经翻转的两页数据-由取消的数据行selectone () {if (this)实现的表。all check){这个。allcheck=false}}:

我走了很多弯路才注意到的问题：

如果从第一页翻到第二页，再回到第一页，选择的数据应该是1/2页的数据，但现实是1/2/1页的数据。演示形式没有问题。此外，如前所述，当所有数据都被选中时，我传递给后台的参数只是一个标志，而不是选中的数据。但是，如果在第一页上取消了一行数据，则所有数据框都已取消，并且不会选择该数据。翻到第二页，当你回到第二页时，Duang~那个数据又被选中了！因为所选数据中有两条数据，所以您取消了一条，而另一条仍然存在。当然，你再取消再回来，就取消了，bug，bug！想法是数据应该被复制。首先想到的是结果的重复和selectionChange方法中的重复，这很悲剧，根本不起作用。整理思路后发现，当选择项发生变化时，我们调用selectionChange方法得到所有选中的数据，此时我们用forEach遍历数据。使用toggleRowSelection方法选择页面中的数据。此时，toggleRowSelection执行一次，selectionChange方法执行一次。如果数据ID相同，不执行toggleRowSelection方法就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考学习价值。谢谢你的支持。