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

痛定思痛。 2024-03-08 08:05 110阅读 0赞

## 问题 ##

## 解决方法： ##

> 1.  根据调试，发现该问题应该属于组件bug，表格主体中给 `footer`留的高度不够导致，重新设置即可。
> 2.  添加生命周期钩子 `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;
          }
     }
    }

--------------------

## 参考链接： ##

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

[2. vue的updated用法][2. vue_updated]

[3. Table 表格][3. Table]

[1. _elementUI _el-table]: https://blog.csdn.net/you199037/article/details/131555965
[2. vue_updated]: https://www.yzktw.com.cn/post/1319639.html
[3. Table]: https://element.eleme.cn/#/zh-CN/component/table