表格组件（vxe-table）合计行

在使用表格组件vxe-table 的合计行方法时，如果涉及到了字段值修改影响合计值计算需要手动调用updateFooter方法。 如果只是给 data 赋值，不需要调用此方法。涉及到影响合计字段的值变动时需要调用。 官网截图官网地址

代码示例：

<template>
  <div>
    <vxe-table
      ref="vxeTable"
      class="mt5"
      border
      :height="tableHeight"
      :data="tableData"
      show-overflow
      :header-cell-style="TABLE_HEADER_CELL_STYLE"
      :cell-style="TABLE_CELL_STYLE"
      show-footer
      :footer-method="footerMethod"
    >
      <vxe-table-column
        field="mofDivCode"
        title="地区编码"
        header-align="center"
        align="left"
      ></vxe-table-column>
      <vxe-table-column
        field="mofDivName"
        title="地区名称"
        header-align="center"
        align="left"
      ></vxe-table-column>
      <vxe-table-column
        field="appalyAmt"
        title="批复金额"
        header-align="center"
        align="right"
      >
        <template v-slot="{ row }">
          <v-format-input
            v-model="row.appalyAmt"
            @change="handChangeAmt"
          ></v-format-input>
        </template>
      </vxe-table-column>
      <vxe-table-column title="操作" header-align="center" align="center">
        <template slot-scope="scope">
          <span class="bs-color-primary poi" @click="handleEditor(scope.row)"
            >编辑</span
          >
        </template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
import {
  innerHeight,
  TABLE_HEADER_CELL_STYLE,
  TABLE_CELL_STYLE,
} from '@/mixin/page';
import { add } from '@/assets/js/big';
import util from '@/assets/js/util';
import filter from '@/config/filter';
export default {
  mixins: [innerHeight],
  data() {
    return {
      TABLE_HEADER_CELL_STYLE,
      TABLE_CELL_STYLE,
      tableData: [],
    };
  },
  methods: {
    /**
     *金额更改调用合计行事件
     *TODO 值变化后必须要更新，否则合计行不会变化
     */
    handChangeAmt() {
      this.$refs.vxeTable.updateFooter();
    },
    /**
     *合计行方法计算applyAmt合计值
     */
    footerMethod({ columns, data }) {
      const sums = [];
      columns.forEach((column, columnIndex) => {
        if (columnIndex === 0) {
          sums.push('合计');
        } else {
          let sumCell = null;
          switch (column.property) {
            case 'appalyAmt':
              sumCell = filter.formatCurrency(
                data.reduce((sum, o) => {
                  return add(util.toNumber(o[column.property]), sum);
                }, 0),
              );
              break;
          }
          sums.push(sumCell);
        }
      });
      // 返回一个二维数组的表尾合计
      return [sums];
    },
    handleEditor() {},
  },
  computed: {
    /**
     * 表格高度
     */
    tableHeight() {
      return this.innerHeight - 160;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .table-format {
  .el-input__inner {
    text-align: right;
  }
}
</style>