解决 element-table 滚动栏失效 element表格滚动栏失效 解决 element -表格 滚动栏 不见失效 解决 表格滚动栏失效

异常

滚动栏只有细细的一条线，根本看不见， 这个问题不知道是怎么出现的，有帖子说是因为固定列造成的， 有帖子说是 列文字溢出造成的

可是这些问题我都没有出现，一开始项目是有滚动栏的，不知道从什么时候开始就变没了

解决

效果

第一种方式, 修改样式

代码

<style lang="scss" scoped>
/**
自定义el-table表格滚动栏样式
*/
.el-table {
    
    
 ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    
    
      width: 10px; /*滚动条宽度*/
      height: 10px; /*滚动条高度*/
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    
    
      box-shadow: 0px 1px 3px #ccced2 inset; /*滚动条的背景区域的内阴影*/
      border-radius: 10px; /*滚动条的背景区域的圆角*/
      background-color: #ccced2; /*滚动条的背景颜色*/
  }
  /*定义滑块 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    
    
      box-shadow: 0px 1px 3px #00a0e9 inset; /*滚动条的内阴影*/
      border-radius: 10px; /*滚动条的圆角*/
      background-color: #00a0e9; /*滚动条的背景颜色*/
  }
}
</style>

第二种方式，使用其他第三方 表格组件

推荐 pl-table 插件, 底层用的就是 element-table组件，不需要额外代码，原装使用，还有一个最大特点 可以加载10万条数据在表格中，不带卡顿的
传送门: pl-table教程

示例图,代码是和element-table一样，只是标签名不一样

效果图