首页
视频
资源
登录
原
vue elementui table去掉滚动条
3589
人阅读
2023/4/27 16:10
总访问:
337277
评论:
0
收藏:
0
手机
分类:
前端
当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 ```
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
小见
吃亏决不亏,惜福才有福
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
云服务
10篇
计算机基础
2篇
NET
5篇
.NET
7篇
后端
4篇
前端
24篇
EF
4篇
随笔
5篇
数据库
1篇
.net core
3篇
linux
2篇
微服务
1篇
移动开发
1篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术