Element UI表格组件:简洁实现跨页勾选、跨页统计功能

基于table的两个属性row-key、reserve-selection和一个事件selection-change即可以非常简洁的实现.

第一步:给el-table绑定row-key属性

row-key属性实际的作用是标识表格每行数据是通过哪个属性来进行区别的,一般而言id比较常见。


id是该行的标识,必须是该数据的唯一值属性

第二步:给type=selection的el-table-column设置reserve-selection属性

reserve-selection的作用是在数据更新之后保留之前选中的数据。它和勾选是密切相关的,因此必须设置在type=selection的那一列上,只需简单绑定true即可。

第三步:给el-table绑定selection-change事件

这一步的目的在于存储所有已勾选的数据,以实现对已勾选数据的计算。有了前两步的设置,selection-change返回的参数selection将是所有页面已勾选的数据,这使我们的问题变得异常简单。

selection-change事件函数的第一个参数就可以获取到所有页面被勾选的数据

你可能感兴趣的:(Element UI表格组件:简洁实现跨页勾选、跨页统计功能)