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 60
overflow-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 {
// 这里我设置的纵向滚动条宽度为8px
width: 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设置）。