在开发后台管理系统中，经常会碰到合计行的需求，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计算总合计数量

          <template #summary><a-table-summary fixed><a-table-summary-row><a-table-summary-cell :index="0"> 合计</a-table-summary-cell><a-table-summary-cell v-for="(item, index) in columns" :key="index" :index="1">// 当列配置了summary为true才合计<template v-if="item?.summary"><a-typography-text>{{ dataSource.reduce((prev: number, next: : any }) => {return prev + next.totalBoard}, 0)}}</a-typography-text></template></a-table-summary-cell></a-table-summary-row></a-table-summary></template>

2.2代码优化

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

    // 模板<template #summary><a-table-summary fixed><a-table-summary-row><a-table-summary-cell :index="0"> 合计</a-table-summary-cell><a-table-summary-cell v-for="(item, index) in contentTableParam.columns" :key="index" :index="1"><template v-if="item?.summary"><a-typography-text>{{ combinedNums(item.dataIndex) }}</a-typography-text></template></a-table-summary-cell></a-table-summary-row></a-table-summary></template>/*** @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<string> // 支持的排序方式，取值为 '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?: booleanrowKey: string // keyisCalcHeight?: boolean // table高度自适应selectedRowKeys?: Array<string | number> // 选中keypagination?: TablePaginationConfigcolumns: ColumnType[]dataSource: Record<string, any>[]
}

2.组件template和ts代码

<template><!-- 如果开启了选择框,则遍历列 --><template v-if="origin.rowSelection"><a-table-summary fixed><a-table-summary-row><a-table-summary-cell :index="0"> 合计</a-table-summary-cell>// 注意,因为table列的对齐方式可配置并且选择框默认占一列,所以这里的index一定要跟i+1相同才可以保证合计列和配置了对齐方式之后的列依然在一列上<a-table-summary-cell v-for="(item, index) in origin.columns" :key="item.dataIndex" :index="index + 1"><template v-if="item?.summary"><a-typography-text>{{ combinedNums(item.dataIndex).toFixed(3) }}</a-typography-text></template></a-table-summary-cell></a-table-summary-row></a-table-summary></template><!-- 如果未开启选择框,循环长度 --><template v-if="!origin.rowSelection"><a-table-summary fixed><a-table-summary-row>// 注意,因为table列的对齐方式可配置,所以 这里的index一定要跟i相同才可以保证合计列和配置了对齐方式之后的列依然在一列上<a-table-summary-cell :index="0"> 合计</a-table-summary-cell><a-table-summary-cell v-for="i in origin.columns.length" :key="i" :index="i"><template v-if="origin.columns[i]?.summary"><a-typography-text>{{ combinedNums(origin.columns[i].dataIndex).toFixed(3) }}</a-typography-text></template></a-table-summary-cell></a-table-summary-row></a-table-summary></template>
</template><script setup lang="ts">
import { interContentTable } from '@/type/interface/content'
import { withDefaults, computed } from 'vue'interface propsType {origin: interContentTable
}const _props = withDefaults(defineProps<propsType>(), {origin: () => ({ isOper: false, loading: false, rowKey: '', columns: [], dataSource: [] }),
})/*** @returns 计算合计行*/
const combinedNums = computed(() => (field: any) => {return _props.origin.dataSource.reduce((prev: number, next: { [x: string]: any }) => {return prev + Number(next[field])}, 0)
})
</script><style scoped lang="less"></style>

3.使用组件

<a-table><template #summary><TemplateSummary :origin="contentTableParam" /></template></a-table><script setup lang="ts" name="goDownPlanList">
import { ref, reactive, getCurrentInstance, nextTick, computed, Ref, onActivated } from 'vue'
import TemplateSummary from '@/components/template-summary/index.vue'
import type { ColumnType } from '@/type/interface/content'const contentTableParam = reactive({isOper: true,emptyText: true, // 是否自定义空数据展示rowSelection: true, // 选择框rowKey: 'id',columnWidth: 80,selectedRowKeys: [] as string[],name: 'GODOWNPLAN_LIST_MAIN',tableConfig: true, // 表单配置isCalcHeight: true, // 是否自动计算table高度loading: false,isSlotOption: ['summary'],pagination: {pageSize: 20,total: 0,current: 1,},scroll: {scrollToFirstRowOnChange: false,y: 300,},columns: [{ title: '单号', dataIndex: 'planCode', resizable: true, width: 250, align: 'center', ellipsis: true },{ title: '状态', resizable: true, key: 'statusName', dataIndex: 'statusName', width: 120, align: 'center', ellipsis: true },{ title: '类型', resizable: true, dataIndex: 'typeName', width: 150, align: 'center', ellipsis: true },{ title: '仓库', key: 'warehouse', dataIndex: 'warehouseCode', resizable: true, width: 200, align: 'center', ellipsis: true },{ title: '货主', resizable: true, key: 'cargoOwner', dataIndex: 'cargoOwnerCode', width: 230, align: 'center', ellipsis: true },{ title: '操作', key: 'operation', fixed: 'right', width: 150, align: 'center' },] as ColumnType[],dataSource: [],
})
</script>

antdvue的table合计行相关推荐

bootstrap table添加合计行
添加合计行首先为表格添加showFooter: true属性然后为列添加footerFormatter属性 var templateTableParams = {classes: "ta ...
react：antd 中 table 添加合计行
用的Antd 的 UI 框架. 场景:table 中后面想添加一行合计.合计的值由后端计算提供.目前想到两种方法. 第一种:比较好维护. 第二种:可以实现功能效果,但是感觉不太优雅. 方法一:把合计行 ...
列表table，将合计行进行单元格合并，element-ui
列表table,将合计行进行单元格合并 1.将列表进行合计操作 2.进行合计行-------单元格合并 3.获取平均数 4.如果想要对分数进行编辑 1.将列表进行合计操作 <el-table i ...
【ElementUI】 table表格尾部的合计行，固定表头却不显示合计行
背景按照官网要求不固定表头,添加show-summary就可以显示合计行问题但是给table加了一个固定高度之后,就不显示了, 打开控制台可以看到这个合计是存在的那么需要做两步,合计即可出现 ...
antd中如何给Table表格添加合计行
最近项目需求:在表格底部添加一行为金额的合计行,然后分页每页都显示,金额字段是后端返回的数据,前端不进行计算. 因为项目的UI框架使用的是Ant Design 3.x版本,找了一下Table的使用方法 ...
实现table表格数据按名称字段分层，各层都有一个合计行，自定义的表格总合计行（vue.js+elementUI）
代码实现 <div class="tableBody" ref="tableBody"><table><div v-for=&qu ...
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
element table 合计第一行固定列
element table 合计第一行在这位大哥这里学来的, 但同时我这边的情况是: 固定高度, 第一列固定, 参数多, 因此, 这个方法不能够完全满足, 因此加入以下代码: 代码作用: 在每次获 ...
elementUI table 添加合计行，合计行放置顶部(标题下内容上)，合计行渲染所有数据的和(取后端接口数据)，合并合计单元格。
1.将show-summary设置为true就会在表格尾部展示合计行. <el-table:data="tableData"id="tableData"s ...

antdvue的table合计行

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

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

组件抽取部分

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

2.组件template和ts代码

3.使用组件

antdvue的table合计行相关推荐

最新文章

热门文章

antdvue的table合计行

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

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

组件抽取部分

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

2.组件template和ts代码

3.使用组件

antdvue的table合计行相关推荐

最新文章

热门文章

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