Element UI表格组件技巧：如何简洁实现跨页勾选

elment ui表格实现跨页勾选

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

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

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

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

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

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

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

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

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);
}
}
}

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