vue el-table-column_elementui合并单元格

Vue Elementui Table 列项求和（表格底部）分页求和 和 总和 希望可以对你开发有帮助

大家也都知道， Elementui中有其组件进行分页求和如下演示：

 在底部进行合计：

上源码：

<el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange" :cell-style="cellStyle"
          :summary-method="getSummaries" show-summary >

:summary-method=”getSummaries” show-summary   这两个属性必须加上！切记 

对求和的数据进行了一番整理： 

    // 求和操作
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计:'
        }
        if (index === 8) {
          sums[index] = '总记录数:' + this.total
        }
          // index >= 5 || index <= 7 是你需要计算的列
          // 当然也可以指定一个或者多个列
        // index === 2 || index === 3 这样值求和第二个与第三个列

        else if (index >= 5 && index <= 7) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                // 保存了两位小数点
                return Math.floor((prev + curr) * 100) / 100;
              } else {
                // 保存了两位小数点
                return Math.floor(prev * 100) / 100;
              }
            }, 0)
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A'
          }
        } else {
          // sums[index] = ''
        }
      })
      return sums
    },

这个是分页求和

很多人想实现求和不受分页的限制这个前端好像暂时无法办到，只能后端进行求和后传递到前端

小贴一段求和sql吧

select
        count(1) as totalRecord,
        IFNULL(SUM(r.pay_price),0) as payPriceSum
        from XXXX(表名) r
        left join client_user c on c.id = r.user_id
<where>
    // 中间可以是你的筛选条件
</where>

 这个是进行总的求和的操作，不过类似于preValueSum等一些属性是后台传递过来的！

    // 求和操作
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计:'
        }
        if (index === 8) {
          sums[index] = '总记录数:' + this.total
        }

          // 指定一个或者多个列
        // index === 2 || index === 3 这样值求和第二个与第三个列

        else if (index === 5) {
          sums[index] = this.preValueSum + ' 元'
        } else if (index === 6) {
          sums[index] = this.servicePriceSum + ' 元'
        } else if (index === 7) {
          sums[index] = this.realPriceSum + ' 元'
        }
   
      })
      return sums
    },

今天的文章vue el-table-column_elementui合并单元格分享到此就结束了，感谢您的阅读。