vxe-table 尾部合计使用

玩代码的菜鸟

已于 2024-05-15 15:26:31 修改

阅读量1.7k

点赞数 2

文章标签： java 前端服务器

于 2024-03-19 15:33:50 首次发布

本文链接：https://blog.csdn.net/junhian/article/details/136844219

版权

本文介绍了如何在Vxe-table组件中使用内置的合计功能，包括设置`show-footer`和`footer-method`，以及注意事项如数据初始化时机和合并单元格的处理。还提供了代码示例和表尾点击事件的处理方法。

摘要由CSDN通过智能技术生成

vxe-table有自带的合计，文档比较繁琐

先看图

官方文档是这么说的

通过表尾来实现合计功能，设置 show-footer show-footer 和 footer-method 设置表尾数据，结果返回一个二维数组
需要注意的是表尾的调用并非实时的，而是在 data 初始化时才会触发执行；如果要达到实时调用请手动调用 updateFooter 方法
（注：footer-method 表尾的数据都是自行生成的，该示例仅供参考）

先上代码：

 <vxe-table
          class="mytable-footer"
          border
          show-footer
          max-height="400"
          :row-config="{isHover: true}"
          :footer-method="footerMethod"
          :merge-footer-items="mergeFooterItems"
          show-footer="true"
          @footer-cell-click="footerClick"
          :data="tableData1">
          <vxe-column type="seq" width="60"></vxe-column>
          <vxe-column field="name" title="Name" sortable></vxe-column>
          <vxe-column field="sex" title="Sex"></vxe-column>
          <vxe-column field="age" title="Age"></vxe-column>
          <vxe-column field="amount" title="Amount"></vxe-column>
        </vxe-table>

import NP from "number-precision"
sumNum(list, field) {
      let count = 0;
      list.forEach((item) => {
        count = NP.plus(
          count,
          Number(item[field] === undefined ? 0 : item[field])
        );
      });
      return count;
    },
  //表尾点击事件
 footerClick({ items, $rowIndex, column, columnIndex, $columnIndex, $event }){
  //获取点击的数据
   console.log(items[$columnIndex])
 },
 footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (
            ["age", "amount"].includes(column.property)
          ) {
            return this.sumNum(data, column.property);
          }
          return null;
        }),
      ];
    },

merge-footer-items这个属性主要是合并单元格：

data里面要先声明mergeFooterItems：[]

记住不要在data里面定义数据，不然页面一刷新就恢复原状

要在赋值tableData1里面push

{ row: 0, col: 0, rowspan: 0, colspan: 11 },

col表示从第几个开始，colspan表示从第几个结束，11其实只是合并到10