element-ui 2.x el-table去掉纵向滚动条并隐藏空白占位列


当table内容列过多时,可通过height属性设置table高度以固定table高度、固定表头,使table内容可以滚动

现在需求是右侧滚动条不好看,需要去除滚动条,并隐藏滚动条所占列的位置

// ----------修改elementui表格的默认样式-----------
.el-table__body-wrapper {
  &::-webkit-scrollbar { // 整个滚动条
    width: 0; // 纵向滚动条的宽度
    background: rgba(213,215,220,0.3);
    border: none;
  }
  &::-webkit-scrollbar-track { // 滚动条轨道
    border: none;
  }
}

// --------------------隐藏table gutter列和内容区右侧的空白 start
.el-table th.gutter{
  display: none;
  width:0
}
.el-table colgroup col[name='gutter']{
  display: none;
  width: 0;
}

.el-table__body{
  width: 100% !important;
}

// --------------------隐藏table gutter列和内容区右侧的空白 end

效果:

搞定


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM