问题描述:
在项目中遇到需要自定义滚动条样式和fixed表格滚动错位时遇到的问题。
例如:下方滚动表格产生错位
用了this.$refs.table.doLayout();等方法解决都没有用发现是自定义滚动条的问题。
解决方法:
给 表格设置 自定义滚动条 并注意:.el-table__body-wrapper::-webkit-scrollbar 的宽高。
详细代码如下:
// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
&::-webkit-scrollbar-track {
background-color: #fff;
}
&::-webkit-scrollbar-thumb {
background-color: #ccc;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #409eff;
}
}
//自定义表格滚动条
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
// 滚动条样式
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #d4d5d8;
border-radius: 5px;
}
//主要是靠这个 注意
//上面.el-table__body-wrapper::-webkit-scrollbar 是 多少px 下面这个也要 多少px
.el-scrollbar__wrap::-webkit-scrollbar {
width: 8px;
height: 8px;
}