关于element中表格只展示一列数据的和

先看效果,认款金额的合计,并且要实时更新

正常做没有什么难点,循环数据+=,然后监听,

技术点

1、只展示一列的合计   这个代码也是找别人的扒下来的

  
//只展示一列的合计的方法
//注意在组件中 Table中需要加入
:summary-method='getSum'  官方给的自定义计算方法
show-summary
这里两个属性
//这里的重点是拿到表格数据,遍历,判断所属列,并放置数据
getSum(param) { console.log(param);
const {columns, data} = param const sums = [] columns.forEach((column, index) => { //这步是为了让最后一行出现 合计 这一行,并且最后一行第一列出现 合计 二字。合计的字可以在这里更改 if (index === 0) { //判断是第一列 sums[index] = '合计' return } switch (column.property) { case 'claimAmount': //这里是需要计算的列所绑定的prop的值 console.log(column.property); sums[index] = (this.claimOrderData.claimMemo) + '' //这里的this.xxxx 直接放计算后的值 break default: //这个默认不要忘记写 break } }) return sums },

2、遍历与监听

遍历就不说了这里说下监听

'claimOrderData.confirmClaimParam': {
        handler(newVal, oldVal) {
          this.claimAmountTotal()  //执行的计算方法
        },
        deep: true
      },

这里用到的是深度监听,
原文地址:https://www.cnblogs.com/C-dashazi/p/10644599.html