先看效果,认款金额的合计,并且要实时更新
正常做没有什么难点,循环数据+=,然后监听,
技术点
1、只展示一列的合计 这个代码也是找别人的扒下来的
//只展示一列的合计的方法
//注意在组件中 Table中需要加入
:summary-method='getSum' 官方给的自定义计算方法
show-summary
这里两个属性
//这里的重点是拿到表格数据,遍历,判断所属列,并放置数据
getSum(param) {console.log(param);const {columns, data} = paramconst 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 直接放计算后的值 breakdefault: //这个默认不要忘记写break}})return sums},
2、遍历与监听
遍历就不说了这里说下监听
'claimOrderData.confirmClaimParam': {handler(newVal, oldVal) {this.claimAmountTotal() //执行的计算方法},deep: true},
这里用到的是深度监听,