element ui 设置表格标题不动，底部汇总

心已赠人 2022-10-10 04:50 233阅读 0赞

> ### 1.设置标题不动 ###
> 
> el-table表格设置-->        :height="tableHeight"
> 
> js设置--> tableHeight: window.innerHeight - 300

> ###  2.底部汇总 ###
> 
>     el-table表格设置-->   show-summary="true" :summary-method="getSummaries"
> 
> 此处注意：单独设置 show-summary="true" 可以汇总所有的列，但是有些列是不需要汇总的，所以会感觉怪怪的哈。:summary-method="getSummaries" 是自定义设置汇总列，如下：
> 
>     getSummaries(param) {
>             //param 是固定的对象，里面包含 columns与 data参数的对象 {columns: Array[4], data: Array[5]},包含了表格的所有的列与数据信息
>             const { columns, data } = param;
>             console.log(param)
>             //console.log(data)
>             const sums = [];
>             columns.forEach((column, index) => {
>               //console.log(column)
>               //console.log(index)
>               if (index === 0) {
>                 sums[index] = '合计';
>                 return;
>               }
>               if(index===3){sums[3]="-"; return;} //设置第四列为 "-"
>            
>               const values = data.map(item => Number(item[column.property]));
>               //验证每个value值是否是数字，如果是执行if
>               if (!values.every(value => isNaN(value))) {
>                 sums[index] = values.reduce((prev, curr) => {
>                   return prev+curr;
>                 }, 0);
>                 sums[index]=sums[index].toFixed(1) //保留一位小数，不限制小数点的话，可以不写
>               }else {
>                 sums[index] = '-';
>               }
>             });
>             sums[18]=(sums[10]/sums[17]*100).toFixed(2)+'%' //设置某一列为为百分数，不用可以不写
>             return sums;
>           },
> 
> 设置完以上信息后，汇总列可能不会显示，此时需要添加这个方法：
> 
> 官方给的是在table里设置，show-summary就可以了，
> 
> 但是给table加了一个固定高度话，就没有了，打开控制台可以看到这个合计是存在的
> 
> 于是乎，在vue的生命周期updated
> 
>     updated () {
>           this.$nextTick(() => {
>             this.$refs['table'].doLayout();
>           })
>         },

![2021062615051077.png][]

一定要加上红色框里面的设置。

到此设置完毕！

[2021062615051077.png]: /images/20221005/0c1823627d844f4e9f9dca72e2c5e807.png