自定义el-table最后一行

需求是做一个这样的 


首先element 的table中原本是有个总计是可以直接用的,但是我们当时的需求是,所有数据的总计,这样的话就与分页有了冲突,因为分页只能计算当前页面的数据, 所以我们只能采用最后一行的总计单独调用接口的形式才获取数据。

1.如果没有第一列的序号 我们可以用最直接的方法就是 用数组合并的方式:

new Array().concat(array1, array12)

目前没有想到有序号 怎么能把序号用总计代替

2.我们可以利用el-table的总计属性 show-summary  结合自定义方法summary-method,代码如下:


结合他的自定义方法去转换成自己想要的数据:

getSummaries(param) {

const { columns } = param

const sums = []

columns.forEach((column, index) => {

switch (index) {

case 0:

sums[index] ='总计'

        break

      case 1:

sums[index] =''

        break

      case 2:

sums[index] =''

        break

      case 3:

sums[index] =this.totalList.normal

        break

      case 4:

sums[index] =this.totalList.rest

        break

      case 5:

sums[index] =this.totalList.legal

        break

      case 6:

sums[index] =this.totalList.total

        break

    }

})

return sums

},

用了个简单粗暴的方法给他转换成自己想要的数据了,最后的结果就是这个样子:


你可能感兴趣的:(自定义el-table最后一行)