el-table表格中需要计算金额合计,合计的金额如果过长需要溢出隐藏并且显示title
问题描述
在一个表格中需要计算金额合计,合计的金额如果过长需要溢出隐藏并且显示title
// 解决表格合计行不显示
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 {value2Text(sums[index], 'area')}
})()
} else {
sums[index] = ''
}
}
})
return sums
}
使用回车标签显示两行合并的数据
summaries(param, idx){
const { columns, data } = param
const sums = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = (()=>{
return total
discount
})()
}
if (index === 3) {
sums[index] = (()=>{
return {this.tableData[idx].dPrice}
{this.tableData[idx].vPrice}
})()
}
})
return sums
}