【关于Element UI中el-table组件】summary-method属性表格底部固定两行并动态赋值

小编在开发账单表时候遇到一个需求，需要在el-table表格添加两行固定行，来统计总值。我们可以看到在各个资源社区里都有关于底部固定一行总计。但是那些都是直接将上面的总值相加起来获得上面所有行的总计值。然而小编这里的需求是将后端返回的数据填充到我们固定的那两行中去。
因此社区里的资源就不符合小编的开发需求了。我们先来看看将所有行相加得出总计行的值的代码是如何的。
一、底部固定一行总计行并得出总计值
1.首先就是在el-table中使用summary-method属性，设置:summary-method=“getSummaries”,这一步是必要的。
2.编写getSummaries()方法函数

getSummaries({ columns, data }){const sums =[];
  columns.forEach((column, index)=>{if(index ===0){
        sums[index]='合计';//可更改合计行的名称return;}const values = data.map(item=>{returnNumber(item[column.property])//property为表头的prop值});// every() 方法用于检测values数组所有元素是否都符合指定条件（通过函数提供）if(!values.every(value=>isNaN(value))){
        sums[index]= values.reduce((prev, curr)=>{const value =Number(curr);//Number转换为数值let sum =Number(Number(prev)+Number(curr)).toFixed(2);//toFixed(2)数据项保留两位小数if(!isNaN(value)){return sum;}else{return prev;}},0);
        sums[index]+='元';//给合计项添加单位元}else{
        sums[index]='';}});return sums;//返回sums数组,sums数组中各项就会显示在合计行的各列中},

这样出来的我们就可以得到单行固定的一个底部总计行了。
那么如何才能弄出底部固定两行，并且返回的值根据后端的数据能够动态修改呢？

二、底部固定两行，并使用后端返回值动态改变
1.我们同样在el-table中使用summary-method属性，设置:summary-method=“getSummaries”
2.编写getSummaries()方法函数

getSummaries(param){const{ columns, data }= param;let that =this;const sums =[];
   columns.forEach((column, index)=>{if(index ===0){
       sums[index]='合计';return;}if(index ===2){//可以看到小编这里使用ref属性，对标签进行绑定，为什么呢？
       sums[index]=<div ref="voucherType"></div>return;}if(index ===3){
       sums[index]=<div ref="billDate"></div>return;}//使用<br/>标签使得数据换行，这样就可以得到固定两行效果if(index ===4){
       sums[index]=<p class="count_row">本期合计<br /><br />本年合计<br /></p>return;}if(index ===5){
       sums[index]=<p class="count_row"><div  ref="borrowAmount1"></div><br /><div  ref="borrowAmount2"></div></p>return;}if(index ===6){
       sums[index]=<p class="count_row"><div  ref="loanAmount1"></div><br /><div  ref="loanAmount2"></div></p>return;}if(index ===7){
       sums[index]=<p class="count_row"><div  ref="direction1"></div></p>return;}if(index ===8){
       sums[index]=<p class="count_row"><div  ref="balance1"></div><br /><div  ref="balance2"></div></p>return;}//这里小编为什么要另出一个赋值呢？因为小编index为1列，怎么使用动态数据都不得行，所以小编直接让index为1的列等于上面的字符，刚好都是一样的if(column.property ==="areaName"){// 判断当前prop绑定的IDconst values = data.map(item=>(item[column.property]))// 把对应一列中的之全部取出，放到一个数组中
       sums[index]= values.reduce((prev, curr)=>{return curr
       },0)}});return sums;},

3.我们可以看到上面的div标签小编都使用ref属性，那么为什么呢？因为小编使用的是后台数据动态赋值。当我们请求到数据的时候使用ref对标签内容进行修改赋值。

//使用setTimeout延时器，等待给标签一些渲染时间setTimeout(function(){
  _this.$nextTick(()=>{
    _this.$refs.direction1.innerHTML = _this.AllCount.yearAmount.direction ==1?'借':'平';
    _this.$refs.voucherType.innerHTML = _this.AllCount.yearAmount.voucherType;
    _this.$refs.billDate.innerHTML = _this.AllCount.yearAmount.billDate;
    _this.$refs.borrowAmount1.innerHTML = _this.AllCount.currentAmount.borrowAmount ==null?'0元':_this.AllCount.currentAmount.borrowAmount+'元';
    _this.$refs.borrowAmount2.innerHTML = _this.AllCount.yearAmount.borrowAmount ==null?'0元':_this.AllCount.yearAmount.borrowAmount+'元';
    _this.$refs.loanAmount1.innerHTML = _this.AllCount.currentAmount.loanAmount ==null?'0元':_this.AllCount.currentAmount.loanAmount+'元';
    _this.$refs.loanAmount2.innerHTML = _this.AllCount.yearAmount.loanAmount ==null?'0元':_this.AllCount.yearAmount.loanAmount+'元';
    _this.$refs.balance1.innerHTML = _this.AllCount.currentAmount.balance ==null?'0元':_this.AllCount.currentAmount.balance+'元';
    _this.$refs.balance2.innerHTML = _this.AllCount.yearAmount.balance ==null?'0元':_this.AllCount.yearAmount.balance+'元';})},1)

好了，这是小编对于el-table的summary-method的一些使用。有更好的方法的小伙伴们记得跟小编分享一下你们的开发经验哦！