element table底部合計自定義並自定義樣式

效果如圖

 

 第一步

el-table標簽加兩個屬性

show-summary //顯示底部欄

:summary-method="getSummaries" // 自定義底部欄數據方法

然后自定義方法 主要是 return sums是顯示底部的數組里面對應列表底部的每一列

getSummaries(param) {
      console.log(param.data)
      let a =0;
      let b =0;
      let c =0;
      let c2 =0;
      let c3 =0;
      let d =0;
      let d2 =0;
      let e =0;
      param.data.forEach((item)=>{
        a++;
        b+=item.bbbb-0;
        e+=item.eeee-0;
        c+=item.cccc.slice(0,item.cccc.indexOf('/'))-0;
        c2+=item.cccc.slice(item.cccc.indexOf('/')+1,item.cccc.lastIndexOf('/'))-0;
        c3+=item.cccc.slice(item.cccc.lastIndexOf('/')+1)-0;
        d+=item.dddd.slice(0,item.dddd.indexOf('/'))-0
        d2+=item.dddd.slice(item.dddd.indexOf('/')+1)-0
        })
       const  sums = ['合計',a,b,`${c}/${c2}/${c3}`,`${d}/${d2}`,e,'——']
        return sums;
 }

方法名隨便 參數獲取的是傳入table的 :data 主要 return 對應每一列

然后自定義樣式 個別表格可能有差異找到樣式加　　/deep/即可

/deep/.el-table__footer-wrapper tbody td.el-table__cell{
  background-color: #023ec1 !important;
}
/deep/.el-table .el-table__footer-wrapper .cell{
    background-color: #023ec1 !important;
}