在配置了 el-table 组件的合计行后，由于elementUI 表格el-table设置高度之后，合计行功能不会显示

问题

在配置了 el-table 组件的合计行后，由于elementUI 表格el-table设置高度之后，合计行功能不会显示

解决方法：

1. 根据调试，发现该问题应该属于组件bug，表格主体中给 footer留的高度不够导致，重新设置即可。
2. 添加生命周期钩子 updated ，对 table 组件重新布局即可解决问题。具体如下：

Vue 文件配置演示：

<el-table
  show-summary
  ref="table"
  :data="dataList"
  :height="tableHeight"
  :summary-method="getSummaries"
>
1
2
3
4
5
6
7

测试数据 dataList 自行配置：

export default {
	data() {
	return {
		dataList: [],
		tableHeight: "400px"
		}
	},
  updated() {
  	 this.$nextTick(() => {
       	this.$refs.table.doLayout()
    	})
	}
  methods: {

	getSummaries(param) {
      const { columns, data } = param;
      console.log("--------------------- column ",columns)
      console.log("--------------------- data ",data)	
      const sums = [];
      columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          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] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
 }
}

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
42
43
44
45

---

参考链接：

1. 解决elementUI 表格el-table设置高度之后合计行不显示

2. vue的updated用法

3. Table 表格