el-table（elementui）表格合计行使用以及滚动条默认样式修改

一、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设置）。