当前位置：首页 > article >正文

vxe-table和element表尾合计行

article 2025/1/30 13:56:39

1、vxe-table

vxe-table的表尾合计，需要show-footer和footer-method搭配使用。
在这里插入图片描述

 <vxe-table
   :data="tableData"
   ref="vxeRef"
   border        
   resizable       
   :footer-method="footerMethod"
   :show-footer="true"         
 >
</vxe-table>

const moneyFilter = (value: any) => {
  if (!value) return '0.00';
  value = value - 0;
  return `$ ${value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}`;
};

// 进行合计
const sumNumNew = (costForm: any, type: any) => {
  let total = 0;
  for (let i = 0; i < costForm.length; i++) {
    total += Number(costForm[i][type]);
  }
  return moneyFilter(total);
};

const footerMethod = ({ columns, data }: any) => {
  const footerData = [
    columns.map((column: any, _columnIndex: any) => {
      if (_columnIndex === 0) {
        return '合计';
      }
      // 传入需要计算合计的列
      if (['test1'].includes(column.field)) {
        return sumNumNew(data, 'test1');
      }
      if (['test2'].includes(column.field)) {
        return sumNumNew(data, 'test2');
      }
      return null;
    }),
  ];
  return footerData;
};

手动更新表尾（对于某些需要频繁更新的场景下可能会用到）：vxeRef.value.updateFooter();

2、element

若表格展示的是各类数字，可以在表尾显示各列的合计。

在这里插入图片描述

 <el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
 >
  </el-table>

//自定义统计
const getSummaries = (param: any) => {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `$ ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}

将 show-summary 设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用 summary-method 并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。

查看全文

http://www.kler.cn/a/522567.html