Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能

业务场景

在使用Element UI的Table组件时，常常面对这样的业务需求：

表格数据的每一项都要提供勾选框，当切换分页时，能够记忆所有页面勾选的数据，以实现批量提交不同页面勾选数据的功能。并且，表格下方实时统计已勾选数据的项数、重量、金额等。

“弯路”分析

我们可能会走“弯路”，使用过于复杂的逻辑去实现。常见的弯路是：

在Vue的data里面存储已勾选数据的数组，而后基于table的selection-change或select、select-all事件去动态修改已勾选数组的数据。切换分页时，遍历当前页面数据判断每一条是否在已勾选数组中，若在，则使用toggleRowSelection手动去设置每条数据的勾选状态。

使用以上方式或者类似方式肯定能够实现目标，但需要考虑的问题过多，过于繁琐，例如：

• 使用一维数组还是二维数组存储数据？各有何优劣？
• 存储每条数据的id还是整条数据？各有何优劣？
• select、select-all、selection-change这几个事件之间如何抉择？
• toggleRowSelection方法的调用时机？若是只存储了id，又该如何调用该方法？

事实上，这将使得记忆勾选和统计功能显得过于复杂，很容易出现bug，想要完全厘清并不容易。

推荐解决方案：row-key、reserve-selection、@selection-change

Element UI官网并没有提供直接的demo用于展示如何实现上述业务场景，但文档中却隐晦的表露出通过设置一些属性和方法是可以较为简洁的实现目标的。

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

(一)给el-table绑定row-key属性

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

 <el-table :data="tableData" border row-key="id"></el-table>

绑定了row-key属性后，即便跨页，由于不同页数据的id不同，因此组件依然可以进行区分从而实现记忆。

(二)给type=selection的el-table-column设置reserve-selection属性

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

<el-table-column type="selection" width="55" :reserve-selection='true'>
</el-table-column>

现在已经能够实现记忆勾选，但无法进行勾选统计，因此还需要进行第三步。

(三)给el-table绑定selection-change事件

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

 <el-table :data="tableData" border row-key="id"
 @selection-change="handleSelectionChange"></el-table>

export default {
	data(){
		return {
			tableData:[],
			selectedData:[]
		};
	},
	methods:{
		handleSelectionChange(rows){
			this.selectedData = rows;
		}
}

(四)使用计算属性实现统计

由第三步可知，selectedData保存了所有页面的已勾选数据，因此我们只需要使用计算属性对selectedData进行计算即可实现统计。

export default {
	data(){
		return {...};
	},
	methods:{...},
	computed:{
		checkedWeight(){
			let totalWeight = 0;
			this.selectedData.forEach(item =>{
				totalWeight += item.weight;
			});
			return totalWeight.toFixed(2);
		}
	}
}

而后在视图中绑定计算属性即可完成。