ElementUI中el-table在表格最下方添加一列匯總小計行

場景

el-table中的每列顯示的是數字，需要在表格的最下面一行添加匯總行，計算每列的總和。

el-table自帶是否顯示匯總行這個屬性。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

屬性聲明如下

 

 

找到要添加匯總行小計行的el-table

<el-table v-loading="loading" :data="kqtjList"  show-summary="true">

設置shoe-summary為true

 

 

但是如果列比較多有滾動條出現的話就會出現上面那種合計行在滾動條

解決辦法

打開此vue頁面添加一些樣式

<style>

.el-table {
  overflow-x: auto;
}
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {
  overflow: visible;
}
.el-table::after {
  position: relative;
}
.el-table--scrollable-x .el-table__body-wrapper {
  overflow: visible;
}
</style>

添加位置

 

 

添加之后的效果