问题

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

解决方法：

根据调试，发现该问题应该属于组件bug，表格主体中给 footer留的高度不够导致，重新设置即可。

添加生命周期钩子 updated ，对 table 组件重新布局即可解决问题。具体如下：

Vue 文件配置演示：

javascript 复制代码

<el-table
  show-summary
  ref="table"
  :data="dataList"
  :height="tableHeight"
  :summary-method="getSummaries"
>

测试数据 dataList 自行配置：

javascript 复制代码

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. 解决elementUI 表格el-table设置高度之后合计行不显示

2. vue的updated用法

3. Table 表格