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

这篇具有很好参考价值的文章主要介绍了在配置了 el-table 组件的合计行后，由于elementUI 表格el-table设置高度之后，合计行功能不会显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题

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

解决方法：

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

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

Vue 文件配置演示：

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

测试数据 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;
      }
 }
}