一、el-table新增合計行以及el-table展示數據出現的問題

1. 使用合計行

• el-table的屬性show-summary設為true，即可在表格尾部展示合計行。默認情況下，第一列不展示數據，而顯示合計二字，可以通過sum-text自己配置，其余列會顯示本列所有數據的和。
• __自定義合計邏輯:__在el-table標簽使用summary-method傳入一個方法，該方法會返回一個數組，該數組的各項會顯示在合計行的各列。
• 自定義合計邏輯示例代碼：

// tamplate標簽中el-table寫法，getTotal為自定義計算合計行數據的函數
// summary為boolean型變量，用于控制是否顯示合計行
<el-table:data="tableData"ref="scrollTable":summary-method="getTotal":show-summary="summary"
></table>// script標簽methods中計算合計行數據的函數getTotal(params) {// columns table的所有列const { columns } = params;let sums = []; // 要返回并展示在界面的數組columns.forEach((element, index) => {if (index == 0) {sums[index] = "合計";} // 這個地方自己定義邏輯// 給sums數組賦值 ,下標為i(從0開始)，則展示中合計行第i+1列});return sums;},

2. table新增合計行后產生的問題以及解決方法

(1)問題1

• 產生問題：添加合計行之后，橫向滾動條位于合計行上方，希望滾動條顯示在合計行下面
• 解決：el-table分為headerWrapper、bodyWrapper、footerWrapper三部分，界面中顯示的橫向滾動條實際上是bodyWrapper的滾動條，通過一些內外邊距設置，讓滾動條挪到表格最下方

 // 滾動區域樣式.el-table--scrollable-x .el-table__body-wrapper {padding-bottom: 50px;}.el-table__footer-wrapper {margin-top: -66px;//66 60overflow-y: scroll !important;}.el-table__fixed-footer-wrapper {padding-bottom: 15px;//15 9}

(2)問題2

• 產生問題：如果table左側設置了固定列，那么橫線滾動條處于固定列下方時無法拖拽進行移動
• 產生原因：合計行使用了position: absolute定位，且設置了層級高于其他元素，會遮擋底下的內容
• 解決：給左側固定列設置bottom（根據自己界面調整），留出固定列底部的位置顯示層級較低的滾動條

::v-deep .el-table__fixed {height: auto !important;bottom: 9px !important;}

3. el-table橫向滾動條滑到最右邊，會出現表頭和內容錯位

（1）問題描述

• 問題描述：當el-table表格有橫向滾動條和縱向滾動條，把橫向滾動條拉到最右邊，表格的表頭會和內容錯位（表頭和內容列不對齊）
• 問題產生原因：在el-table有縱向滾動條時，el-table__body-wrapper + 縱向滾動條的寬度是100%，故表格內容區域寬度不足100%，而表頭el-table__header-wrapper的寬度仍為100%，表格內容實際寬度小于表頭，因此造成錯位

（2）解決問題

• 思路：給表格表頭的寬度設置和表格內容一樣即可100% - 縱向滾動條寬度
• 代碼實現

::v-deep {.el-table__header-wrapper {// 這里我設置的縱向滾動條寬度為8pxwidth: calc(100% - 8px) }
}

二、修改el-table默認滾動條樣式

• -webkit-scrollbar 表示整個滾動條
• -webkit-scrollbar-thumb 滑塊
• -webkit-scrollbar-track 軌道，里面有滑塊
• -webkit-scrollbar-button 滾動條軌道的兩端按鈕，允許通過點擊微調小方塊的位置
• 代碼示例：

::v-deep .el-table__body-wrapper::-webkit-scrollbar {width: 10px; /*滾動條寬度*/height: 10px; /*滾動條高度*/}

可以根據以上幾個樣式組成部分修改滾動條默認樣式，比如寬高、以及是否顯示等（通過overflow設置）。