el-table如何实现合计显示

本文主要讲解el–table如何实现合计显示，其实想要实现el-table表格的底部进行合计显示，我们只需要在<el-table>标签中添加show-summary属性，并且定义summary-method方法，可以根据自己的需求来计算合计值，这里我们看下下面的代码案例：

这里我们定义了getSummaries计算合计方法，计算了第四列和第六列进行计算展示：

<el-table :data=\"deptItem.relOutTicDetails\" row-key=\"uuid\" border show-summary :summary-method=\"getSummaries\">
   <el-table-column label=\"序号\" width=\"50\" type=\"index\" align=\"left\"></el-table-column>
   <el-table-column label=\"发票代码\" min-width=\"100\" align=\"left\" prop=\"tic_code\" :show-overflow-tooltip=\"true\"/>
   <el-table-column label=\"发票号码\" min-width=\"100\" align=\"left\" prop=\"tic_number\" :show-overflow-tooltip=\"true\"/>
   <el-table-column label=\"发票非税金额(元)\" min-width=\"140\" align=\"left\" prop=\"tic_non_tax_total\" :show-overflow-tooltip=\"true\"/>
   <el-table-column label=\"税率(%)\" align=\"left\" min-width=\"100\" prop=\"tic_tax_rate\" :show-overflow-tooltip=\"true\"/>
   <el-table-column label=\"发票价税总金额(元)\" min-width=\"139\" align=\"left\" prop=\"tic_total\" :show-overflow-tooltip=\"true\"/>
   <el-table-column label=\"预付款平账信息\" min-width=\"100\" align=\"left\" prop=\"is_fl_pre_pay\" :show-overflow-tooltip=\"true\"/>
   <el-table-column label=\"预付款金额(元)\" min-width=\"140\" align=\"left\" prop=\"fl_pre_pay\" :show-overflow-tooltip=\"true\"/>
</el-table>

//table的合计方法
getSummaries(param){
   const { columns, data } = param
   const sums = []

   columns.forEach((column, index) => {
      //第一个显示为合计
      if (index === 0) {
         sums[index] = \'合计\'
         return
      }
      const values = data.map((item) => item[column.property])
      //此处我只需要第四列和第六列进行计算展示
      if (!values.every(value => isNaN(value)) && index===3 || index===5) {
         sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
               let sumData = this.$numAdd(prev,curr)
               return sumData;
            } else {
               return prev;
            }
         }, 0);
         sums[index] += \' 元\';
      } else {
         sums[index] = \'\';
      }
   });
   return sums
},

以上就是el-table如何实现合计显示的全部内容希望对你有帮助，欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！