vue+ element-ui el-table组件合计行自定义合并（summary-method）

原创已于 2022-09-30 10:35:35 修改 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

于 2022-09-30 10:31:45 首次发布

本文介绍了在ElementUI中如何自定义表格的合计功能，包括金额大小写转换和行合并。作者在遇到无法直接满足需求的解决方案后，通过改造官方的合计方法实现了自动换行和格式化显示。改造后的代码能够处理大写和小写金额，并展示了具体的CSS和JavaScript操作来完成表格合计行的合并。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随笔记录：

今天接到的需求中有个表格的合并行需要同时用到大写和小写；

金额过大时，当前行定义的sum[5]单价列会自动换行；

没有百度到合适的方法；

后来用别的方式改造

  // 这里是官方的合计方法
     getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 7) {
           sums[index] = "小写";
          return;
        }
      const values = data.map((item) => {
          if (column.property == "合计") {
            return Number(item[column.property]);
          }
        });

         if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
                 return prev;
            }
          }, 0);
          sums[index] = Math.floor(sums[index] * 100) / 100;
          sums[index] += "";
        }
      });
      sums[8] = sums[6] ? sums[6] : "";
      sums[6] = "";
      sums[5] = this.convertCurrency(sums[8] / 1);
      this.合计 = sums[8] ? Number(sums[8]) : 0;
        // 在执行栈最后加入重建合计行后合并行
        // 需要在<el-table id="table">
       this.$nextTick(() => {
         const tds = document.querySelectorAll(
           "#table .el-table__footer-wrapper tr>td"
         );
         // colSpan合并列
         tds[1].colSpan = 6;
         tds[0].style.textAlign = "center";
         tds[2].style.display = "none";
         tds[3].style.display = "none";
         tds[4].style.display = "none";
         tds[5].style.display = "none";
         tds[6].style.display = "none";
      // });
      return sums;
      },