实现方式,自定义全局的element样式如下: /*** 表格滚动条*/// 横向滚动条高度$scrollbarheight: 15px;.el-scrollbar{//偏移.el-scrollbar__bar{bottom:1px;}//高度.el-scrollbar__bar.is-horizontal{height:$scrollbarheight;}// 横向滚动条.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb{// ...
最近有个小伙伴问我做一个任务就是,在el-table中,点击某一行,这一行下方会出现这一行的所有信息,该怎么做。我解决以后,他说他们得在展开的行里画Echarts图,并不像官方文档里面那样简单只用表单显示数据。 我想了想,首先呢,要说几个el-table的属性。 row-key属性:row-key就是要指定一个key标识这一行的数据...
具体做法是,在table标签中添加属性scroll-x="true"即可。 除此之外,还可以通过剪切滚动条到table元素实现吸底。如果需要设置el-table的横向滚动条一直显示,可以设置el-tablescrollbar-always-on属性。 如果你对Element Plus的table横向滚动条使用还有疑问,可以查阅相关文档或联系Element Plus的官方技术支持。
</el-table> </template> <style scoped> /*覆盖el-table的滚动条样式*/ .el-table__body-wrapper::-webkit-scrollbar { width: 8px; } .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #ccc; } .el-table__body-wrapper::-webkit-scrollbar-track {...
.el-table__body-wrapper { overflow: auto; flex-shrink: 0; width: 100%; position: static; .el-table__body-wrapper { position: static; } .el-scrollbar { overflow: auto; position: static; height: auto; } } .el-table--scrollable-x .el-table__body-wrapper { ...
场景描述:使用ElementPlus中的表格动态加载数据的时候,横向滚动条滚动错位或者根本滚动不到底部。 参考的文章:https://github.com/ElemeFE/element/issues/7948 解决: <template> <el-table ref="table" :data="tableData" style="width: 100%"> ... </el-table> </template> ... methods: { //动态加载...
直接调试css就行了呗
Build Tool:Vite Reproduction Related Component el-table Reproduction Link Element Plus Playground Steps to reproduce 1、多添加几列,让表格出现横向滚动条 2、让鼠标在滚动条和开启tooltip列的最后一行数据之间,上下往复移动 What is Expected? 不报错
el-table-v2 Reproduction Link Element Plus Playground Steps to reproduce 总共有15列数据,但是无法完全显示,也无法通过鼠标进行左右滚动 What is Expected? 能通过滚动看到右边被隐藏的数据 What is actually happening? 横向无法通过鼠标进行滚动 Additional comments ...
1.滚动条样式设置::-webkit-scrollbar { width: 15px; height: 15px; border-radius: 15px; background-color: transparent; } 2.右侧固定列距离设置.el-table__fixed,.el-table__fixed-right { height: calc(100% - 15px)!important; // ( 100% - 横向滚动条高度 ) right: 15px !important; /...