el-table合计功能

合计

头部

将show-summary设置为true就会在表格尾部展示合计行, 

:summary-method="getSummaries", getSummaries 对合计进行处理，

 :header-cell-style="{background:'#F5F5F5 !important',height:'0.48rem !important'}"对表格头部进行样式设置。

<el-table show-summary ref="ipstable" :summary-method="getSummaries"
   :data="tableData.slice((currpage - 1) * pagesize,
 currpage * pagesize)" :header-cell-style="{background:'#F5F5F5 
!important',height:'0.48rem !important'}"
style="width: 100%" height="calc(100vh - 3.1rem)" stripe>

对合计进行处理

​
// 合计功能 
            getSummaries(param) {
              const { columns, data } = param;
              const sums = [];
              // console.log(param);
              var that = this;
              columns.forEach((column, index) => {
                if (index === 0) {
                  sums[index] = '合计';
                  return;
                } else if (index === 5 || index === 6 || index === 7) {
                  
                  sums[index] = 0;
                  return;
                } else {
                  sums[index] = ' -- ';
                  return;
                }
              });

              sums[5] = "在线:" + that.total.status;
              sums[6] = "占用:" + that.total.use_status;
              sums[7] = "监控:" + that.total.agent_status;

              return sums;
            },

​

el-table合计行不显示，除页面缩放或者F12

解决方法：在updated生命周期中调用 doLayout

   updated() {
            this.$nextTick(() => {
              this.$refs.ipstable.doLayout();
              // console.log("do layout");
            });
          },