el-table表格中需要计算金额合计,合计的金额如果过长需要溢出隐藏并且显示title
计算 显示 需要 Table 表格 隐藏 如果 溢出
2023-09-11 14:15:07 时间
问题描述
在一个表格中需要计算金额合计,合计的金额如果过长需要溢出隐藏并且显示title
<!-- index 是tableData循环的下标-->
<el-table ref="tableRef" :data="tableData" show-summary :summary-method="val => summaries(val, index)" ></el-table>
// 解决表格合计行不显示
updated() {
this.$nextTick(() => {
this.$refs.tableRef.doLayout();
})
}
合并数据并在合计行使用v-title指令
/**
* @Description: 合并数据
* @param {*} param
* @return {*}
*/
getSummaries(param, idx) {
const { columns, data } = param
const sums = []
if (!Array.isArray(columns)) return
columns.forEach((column, index) => {
if (index === 1) {
sums[index] = '合计'
return
}
const key = column.property
const sPam = ['gAmount', 'oAmount', 'cTotal']
if (sPam.includes(key)) {
const values = data.map(item => Number(item[key]))
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0)
// 这里插入标签
sums[index] = (() => {
return <span v-title>{value2Text(sums[index], 'area')}</span>
})()
} else {
sums[index] = ''
}
}
})
return sums
}
使用回车标签显示两行合并的数据
summaries(param, idx){
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = (()=>{
return <p>total<br/><br/>discount</p>
})()
}
if (index === 3) {
sums[index] = (()=>{
return <p>{this.tableData[idx].dPrice}
<br/><br/>{this.tableData[idx].vPrice}</p>
})()
}
})
return sums
}
相关文章
- 显示游戏FPS帧率的几种计算方式
- JavaScript如何获取/计算页面元素的offset?
- 深度揭秘阿里云函数计算异步任务能力
- 流式计算常见模块用法说明
- C/C++基础讲解(七十一)之常见试题解答篇(求解符号方程/计算标准差/求取符合特定要求的素数)
- PCL 计算点云法向量并显示
- PromQL 计算Counter指标增长率 rate irate increase
- VC/MFC中计算程序运行时间
- CV之FD之HOG:图像检测之基于HOG算法、简介、代码实现(计算图像相似度)之详细攻略
- 【阶段三】Python机器学习30篇:机器学习项目实战:智能推荐系统的基本原理与计算相似度的常用方法
- 《多接入边缘计算(MEC)及关键技术》读书笔记 | 第8章 基于MEC的固移融合
- 华为云计算之快照技术
- C语言之计算程序运行时间(八)
- 《云计算架构技术与实践》连载(12)2.2.7 应用管理自己主动化技术
- 【SQL开发实战技巧】系列(二十五):数仓报表场景☞结果集中的重复数据只显示一次以及计算部门薪资差异高效的写法以及如何对数据进行快速分组
- Image数据数值计算处理的一个小问题