这篇文章主要介绍了el-table合并数据后不显示问题，以及如何在合并行中设定特殊样式和在合计行使用指令的问题。

问题描述

在一个表格中需要计算金额合计，合计的金额如果过长需要溢出隐藏并且显示title

1
2
<!-- index 是tableData循环的下标-->
<el-table ref="tableRef" :data="tableData" show-summary :summary-method="val => summaries(val, index)" ></el-table>
1
2
3
4
5
6
// 解决表格合计行不显示
updated() {
	this.$nextTick(() => {
	   this.$refs.tableRef.doLayout();
	})
}

合并数据并在合计行使用v-title指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/**
 * @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
}

使用回车标签显示两行合并的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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
}