缴费单据样式的表格

废话不多说，直接上图，上代码。

 金额控制大写转换的代码：

function moneyChange(n) {
            //金额大写转换    
            if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n))
                return "数据非法";
            var unit = "千百拾亿千百拾万千百拾元角分", str = "";
            n += "00";
            var p = n.indexOf('.');
            if (p >= 0)
                n = n.substring(0, p) + n.substr(p + 1, 2);
            unit = unit.substr(unit.length - n.length);
            for (var i = 0; i < n.length; i++)
                str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
            return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(
                /零(万|亿|元)/g, "$1").replace(/(亿)万|零(拾)/g, "$1$2").replace(
                    /^元零?|零分/g, "").replace(/元$/g, "元整");
        }

页面代码：

<template>
  <el-table
    :data="tableData"
    border
    show-summary
    :summary-method="getSummaries"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="数值 2">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="数值 3">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    watch: {
        tableData: {
            async handler () {
                await this.$nextTick()
                const tds = document.querySelectorAll('#m_table .el-table__footer-wrapper td') // 获取尾部的表格td
                console.log(tds)
                if (tds.length > 0) {
                    tds[0].colSpan = 2 // 合并底部1、2单元格为1个格子
                    tds[0].getElementsByTagName('div')[0].style.textAlign = 'left' // 底部样式居左
                    tds[1].style.display = 'none' // 隐藏第二个格子
                }
            },
            immediate: true, // 立即执行 
            deep: true // 深度监听
        }
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '实缴金额(大写)';
            return;
          } else {
             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 prev + curr;
              } else {
                return prev;
              }
            }, 0)
             sums[index] = Number(sums[index]).toFixed(2) // 保留两位小数
              if (index === columns.length - 1) {
                sums[0] += numChange(values.reduce(prev, curr)=>{
                  let value = Number(curr)
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                })
              }
            } else {
              sums[index] = ''
            }
          }
        })
        return sums
      }
    }
  }
</script>