前端 - vben-admin table表格统计 合计行数据?

Question

html

<BasicTable @register="registerTable">    <template #action="{ record }">      <TableAction        :actions="[          {            label: '查看',            tooltip: '查看',          },        ]"      />    </template> </BasicTable>

    const [registerTable, { reload, updateTableDataRecord }] = useTable({      title: '列表',      api: getApi,      rowKey: 'id',      columns: columns,      ellipsis: false,      pagination: false,      showSummary: true,      useSearchForm: true,      showTableSetting: false,      bordered: true,      summaryFunc(val) {        console.log('计算合计', val)        return val;      },      actionColumn: {        width: 60,        title: '操作',        dataIndex: 'action',        slots: { customRender: 'action' },      },    });

后台返回的数据如下：

let item = [ { name: '测试', a: 20,b: 11, c: 15 }, { name: '测试1', a: 15,b: 1, c: 7 }, { name: '测试2', a: 10,b: 6, c: 6 }, { name: '测试3', a: 5,b: 0, c: 5 }, { name: '测试4', a: 5,b: 0, c: 2 }, { name: '测试5', a: 6,b: 20, c: 0 },]

然后想把表格底部增加一行：
把字段 a b c 的数据相加求和

麻烦各位大佬们帮我看看，是不是在summaryFunc 这个方面里面写逻辑，然后数据怎么放在BasicTable 的底部显示一行。

Answer 1

summaryFunc(param) {  const { columns, data } = param;  const sums = {};    // 遍历所有列，找出需要合计的列  columns.forEach(column => {    if (['a', 'b', 'c'].includes(column.dataIndex)) {      // 初始化合计值为0      sums[column.dataIndex] = 0;      // 遍历所有行数据，累加对应字段的值      data.forEach(row => {        if (!isNaN(row[column.dataIndex])) {          sums[column.dataIndex] += Number(row[column.dataIndex]);        }      });    }  });    // 返回合计数据对象  return sums;}

Answer 2

是的，summaryFunc 是用来定义表格底部合计行的计算逻辑的地方。在这个函数中，你需要遍历所有行数据，并对每个需要合计的字段进行求和。然后，返回的合计数据会被自动显示在表格的底部合计行中。

根据你的数据结构和需求，summaryFunc 函数应该像这样实现：

summaryFunc(param) {  const { columns, data } = param;  const sums = {};    // 遍历所有列，找出需要合计的列  columns.forEach(column => {    if (['a', 'b', 'c'].includes(column.dataIndex)) {      // 初始化合计值为0      sums[column.dataIndex] = 0;      // 遍历所有行数据，累加对应字段的值      data.forEach(row => {        if (!isNaN(row[column.dataIndex])) {          sums[column.dataIndex] += Number(row[column.dataIndex]);        }      });    }  });    // 返回合计数据对象  return sums;}

然后，在BasicTable组件中，summaryFunc 函数的返回值（一个对象，包含了每个需要合计字段的合计值）会被渲染到底部的合计行中。默认情况下，如果列定义（column 对象）中有 summary 属性，且其值为 true，那么该列就会被渲染合计值。

为了确保合计行正确显示，你还需要在columns数组中为需要合计的字段（a, b, c）设置 summary 属性为 true。

例如：

const columns = [  {    title: 'Name',    dataIndex: 'name',    key: 'name',    // 此处不需要合计，所以不设置summary属性  },  {    title: 'A',    dataIndex: 'a',    key: 'a',    summary: true, // 设置summary属性为true以显示合计值  },  {    title: 'B',    dataIndex: 'b',    key: 'b',    summary: true, // 设置summary属性为true以显示合计值  },  {    title: 'C',    dataIndex: 'c',    key: 'c',    summary: true, // 设置summary属性为true以显示合计值  },  // ... 其他列定义];

确保BasicTable组件的columns属性接收这个包含summary属性的列定义数组。

这样，在表格的底部就会显示一行合计数据，包含字段a、b和c的合计值。

请注意，根据你使用的BasicTable组件的库和版本，具体的实现可能会有所不同。上面的代码是一个基于通常的表格组件实现方式的示例。如果BasicTable组件有特殊的实现方式或者API，请按照该组件的文档进行相应的调整。