element-ui 设置table表头固定

设置包裹table组件的标签flex:1
将table高度设为100%

更改table默认滚动条

统一设置样式,在App.vue添加样式：

.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);}

对应界面设置样式

<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>