el-table表头固定 内容滚动 滚动条隐藏

817 阅读1分钟

直接高度写死 然后就出现滚动条

<el-table :data="islist" ref="table" :max-height="tableHeight" @cell-mouse-enter="mouseover" @cell-mouse-leave="mouseout">

    data()
    { return { tableHeight: 150, myTimer: null, } }
    
    

image.png

不要在scoped里面写

<style lang='scss'>
// ----------修改elementui表格的默认样式-----------
.yl-table .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
.yl-table .el-table th.gutter {
  display: none;
  width: 0;
}
.yl-table .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

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

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