問題描述

在一個表格中需要計算金額合計，合計的金額如果過長需要溢位隱藏並且顯示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
}