在开发后台管理系统中，经常会碰到合计行的需求，element有直接的属性可以使用，antdvue的需要手动去生成 

https://www.antdv.com/components/table-cn/#components-table-demo-summary

 如图为实现合计后的效果

        1。首先给table配置column的时候，要明确哪些字段需要使用合计，如上图，只有总板数需要使用合计，那给总板数的配置加上标识符 即可,我这里为了方便辨识，直接增加了 summary：true

{ title: '总板数', resizable: true, dataIndex: 'totalBoard', width: 150, align: 'center', ellipsis: true, summary: true },

        2.搭好基础结构，直接上代码

               2.1当需要合计时才去遍历表格数据使用reduce计算总合计数量

                2.2代码优化

        当字段为动态时，并且模板里写太多ts语法看起来太臃肿，所以抽成计算属性更好维护

                

// 模板

/**

* @returns 计算合计行

*/

const combinedNums = computed(() => (field: any) => {

return contentTableParam.dataSource.reduce((prev: number, next: { [x: string]: any }) => {

return prev + next[field]

}, 0)

})

组件抽取部分

首先组件封装思路：因为业务的表格涉及到部分表格开启了选择框，部分未开启，选择框会坐固定，所以要分两种情况来判断

1.组件需要接收的参数ts类型

import type { TablePaginationConfig } from 'ant-design-vue'

import type { Rule } from 'ant-design-vue/es/form'

export type ColumnType = {

title: string // 标题

dataIndex?: string // 列数据在数据项中对应的路径

key?: string // Vue 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性

resizable?: boolean // 是否可拖动调整宽度，此时 width 必须是 number 类型

width: number // 列宽度

align?: string // 对齐方式

ellipsis?: boolean // 超过宽度将自动省略

sorter?: boolean // 开启排序

sortDirections?: Array // 支持的排序方式，取值为 'ascend' 'descend'

summary?: boolean // 是否开启列合计

fixed?: 'left' | 'right' // 对其方式

}

export type interContentTable = {

name?: string // 使用Table排序必填

isOper: boolean // table扩展项

rowSelection?: boolean // 是否开启选择框

rowSelectionType?: 'radio' | 'checkbox' // 是否开启选择框

tableConfig?: boolean // table排序

loading?: boolean

rowKey: string // key

isCalcHeight?: boolean // table高度自适应

selectedRowKeys?: Array // 选中key

pagination?: TablePaginationConfig

columns: ColumnType[]

dataSource: Record[]

}

2.组件template和ts代码 

3.使用组件

参考阅读

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。