设置包裹table组件的标签flex:1
将table高度设为100%
更改table默认滚动条
统一设置样式,在App.vue添加样式：文章来源：https://www.toymoban.com/news/detail-516336.html
.el-table__body-wrapper::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #ebeef5;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #ebeef5;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: rgba(255, 255, 255, 1);
}
对应界面设置样式文章来源地址https://www.toymoban.com/news/detail-516336.html
<style lang="scss">
.el-table {
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 10px; /*滚动条宽度*/
height: 10px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: 0px 1px 3px rgba(0, 0, 0, .3) inset; /*滚动条的背景区域的内阴影*/
border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: rgba(255, 255, 255, 1); /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
box-shadow: 0px 1px 3px rgba(0, 0, 0, .2) inset; /*滚动条的内阴影*/
border-radius: 10px; /*滚动条的圆角*/
background-color: #ebeef5; /*滚动条的背景颜色*/
}
}
</style>
到了这里，关于element-ui 设置table表头固定的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
