当前位置: 首页 > news >正文

重庆网站建为什么要做个人网站

重庆网站建,为什么要做个人网站,外贸公司网站设计公司,郑州建设局问题背景 最近在做后台管理项目el-table 时候需要进行表尾合计,修改合计后文字的样式,合并单元格。 想实现的效果 合并表尾单元格前三列为1格;对某些指定的单元格进行表尾合计;合计后的文本样式加粗;涉及到金额需要千…

问题背景

最近在做后台管理项目el-table 时候需要进行表尾合计修改合计后文字的样式合并单元格

想实现的效果

在这里插入图片描述

  1. 合并表尾单元格前三列为1格;
  2. 对某些指定的单元格进行表尾合计;
  3. 合计后的文本样式加粗;
  4. 涉及到金额需要千分位分割并保留两位小数;

涉及到的属性方法

先看下element-plus 中关于 el-table 中能实现上面效果涉及到的属性和方法。

<el-table ref="tableRef":show-summary="true" :summary-method="getSummaries":span-method="spanMethod" 
></el-table>
  • show-summary: 是否在表尾显示合计行;
  • summary-method:自定义的合计计算方法;
  • span-method:合并行或列的计算方法;

el-table表尾合计行 官方文档

表尾合计

对某些指定的单元格进行表尾合计;涉及到金额需要千分位分割并保留两位小数;

<script setup lang="ts">
import { ref, unref, reactive, onMounted } from 'vue'
import type { TableColumnCtx } from 'element-plus'// 模拟接口返回的数据
const data = [{ blocCustNm: 'A', blocLmt: 600, totLnchAmt: 10, totBsnBal: 20, aprvAmt: 30, lnchAmt: 40, bsnBal: 50 },{ blocCustNm: 'B', blocLmt: 200, totLnchAmt: 20, totBsnBal: 30, aprvAmt: 40, lnchAmt: 50, bsnBal: 60 },{ blocCustNm: '', blocLmt: 300, totLnchAmt: 30, totBsnBal: 40, aprvAmt: 50, lnchAmt: 60, bsnBal: 70 }, // blocCustNm为空{ blocCustNm: '', blocLmt: 200, totLnchAmt: 30, totBsnBal: 40, aprvAmt: 50, lnchAmt: 60, bsnBal: 70 }, // blocCustNm为空{ blocCustNm: 'A', blocLmt: 400, totLnchAmt: 40, totBsnBal: 50, aprvAmt: 60, lnchAmt: 70, bsnBal: 80 }, // blocCustNm重复{ blocCustNm: 'C', blocLmt: 500, totLnchAmt: 50, totBsnBal: 60, aprvAmt: 70, lnchAmt: 80, bsnBal: 90 }
]
// 千分位分割,保留小数
function toFixedThousandFilter(num:undefined|number|string, fixed = 2) {if (num === undefined || num === 'undefined' || num === null || num === 'null') return ''return (null || 0).toFixed(fixed).replace(/^-?\d+/g, (m) => m.replace(/(?=(?!\b)(\d{3})+$)/g, ','))
}interface Product{blocLmt:string // 集团额度(万元)totLnchAmt:string // 总投放金额(万元)totBsnBal:string // 总业务余额(万元)aprvAmt:string // 审批金额(万元)lnchAmt:string // 投放金额(万元)bsnBal:string // 业务余额(万元)
}
interface SummaryMethodProps<T = Product> {columns: TableColumnCtx<T>[]data: T[]
}
const getSummaries = (param: SummaryMethodProps) => {const { columns, data } = paramconst sums:string[] = []const uniqueBlocCustNm = new Set<string>() // 存储已经处理过的blocCustNm,避免重复计算同个集团客户const sumArr = ['totLnchAmt', 'totBsnBal', 'aprvAmt', 'lnchAmt', 'bsnBal'] // 只对接口返回的这几个字段进行表尾合计columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计'} else if (column.property === 'blocLmt') {let blocLmtSum = 0 // 集团额度总额data.filter((item: anyObj) => {if (!item.blocCustNm || !uniqueBlocCustNm.has(item.blocCustNm)) {blocLmtSum += Number(item[column.property])if (item.blocCustNm) {uniqueBlocCustNm.add(item.blocCustNm)}}})sums[index] = toFixedThousandFilter(blocLmtSum)} else if (sumArr.includes(column.property)) {const values = data.map((item: anyObj) => Number(item[column.property]))sums[index] = getTotalSum(values)}})return sums
}
//封装公共累加方法
const getTotalSum = (values:number[]):string => {if (values.every((value) => Number.isNaN(value))) {return '-'}const total = values.reduce((prev, curr) => {const value = Number(curr)if (!Number.isNaN(value)) {return prev + curr} else {return prev}}, 0)return toFixedThousandFilter(total)
}
</script>

合并表尾单元格前三列为1格

// 合并前三列单元格
const tableRef = ref()
const spanMethod = () => {const current = tableRef.value.$el.querySelector('.el-table__footer-wrapper').querySelector('.el-table__footer')const cell = current.rows[0].cellscell[0].style.textAlign = 'center' // 合计行第一列字段居中显示cell[1].style.display = 'none'cell[2].style.display = 'none' // 隐藏被合并的单元格,不隐藏的话会占位。cell[0].colSpan = '3' // 合并单元格return [1, 1] // 其它单元格按默认显示
}

参考:el-table合计行单元格合并、合并行金额四舍五入保留两位小数、合计行样式修改

http://www.yayakq.cn/news/650153/

相关文章:

  • 购销网站建设视频百度云阳泉建设公司网站
  • 初中生可做兼职的网站响应式网站建设的未来发展6
  • 免费网页代理ip地址网站方圆网 网站建设
  • 湖南网络公司网站建设高清图片免费下载
  • 学做美食网站wordpress 网站打不开
  • 免费网站推广文章微信小程序公司
  • 郴州网站建设软件定制开发平台合肥墙面刷新
  • 网站建设推广是什么工作室企业电话黄页
  • 加强网站信息建设营销型网站有哪些代表
  • 桂林市网站建设关键词优化排名用哪些软件比较好
  • 腾讯云网站建设廊坊网站建
  • 河北省建设注册中心网站官方网站 优帮云
  • 北京网站排名方案山东华邦建设集团网站
  • 帮人代做静态网站多少钱在一个城市做相亲网站
  • 江门公司网站建设android开发工程师
  • 如何开发wap网站台州低价网站建设
  • 怎样做医疗保健网站微商代理怎么找货源
  • 网站为什么功能需求邯郸有没有专门做写字楼的网站
  • 中山企业网站推广自学软件开发
  • 谁有做任务网站网页设计与网站建设完全学习手册pdf
  • 宜昌网站推广在福州的网站制作公司
  • 房屋自建设计哪个网站好seo网上培训
  • 池州网站建设公司做网站用什么cms
  • html 网站开发最好看免费观看高清大全大江大河
  • 休闲旅游产品营销网站的建设策略室内设计效果图手绘图
  • ie9网站后台编辑器泰安人才招聘网最新招聘2023
  • 重庆论坛网站建设建设网站用什么语言好
  • jsp做网站多吗卷帘门怎么做网站
  • 设计素材网站哪个最好用外网不能访问wordpress
  • 成都flash互动网站开发有域名怎么建设网站