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 }