vue elementui table去掉滚动条 电脑版发表于:2023/4/27 16:10 当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 ``` **如果样式不想影响全局,可以使用样式穿透** ``` ::v-deep .el-table__body-wrapper { // 整个滚动条 &::-webkit-scrollbar { width: 0px; // 纵向滚动条的宽度 background: rgba(213, 215, 220, 0.3); border: none; } // 滚动条轨道 &::-webkit-scrollbar-track { border: none; } } // --------------------隐藏table gutter列和内容区右侧的空白 start ::v-deep .el-table th.gutter { display: none; width: 0 } ::v-deep .el-table colgroup col[name='gutter'] { display: none; width: 0; } // 这个样式不加的话内容哪里会缺一点,估计是因为滚动条哪里缺的没有补上 ::v-deep .el-table__body { width: 100% !important; } // --------------------隐藏table gutter列和内容区右侧的空白 end ```