具体做法是,在table标签中添加属性scroll-x="true"即可。 除此之外,还可以通过剪切滚动条到table元素实现吸底。如果需要设置el-table的横向滚动条一直显示,可以设置el-tablescrollbar-always-on属性。 如果你对Element Plus的table横向滚动条使用还有疑问,可以查阅相关文档或联系Element Plus的官方技术支持。
// 获取左侧表格视图显示的宽度即滚动条长度 this.scrollTrackWidth = this.$refs.tableRef.clientWidth; // 判断实际宽度是否大于或者小于视图显示宽度,是则隐藏自定义的滚动条 if (this.contentWidth <= this.scrollTrackWidth) { this.showScroll = false; } }, // 每次窗口变化则再次初始化自定义滚动条宽...
在 使用Vue 3.0 和 Element Plus 中修改 el-table 的滚动条样式,可能遇到了样式不生效的问题。这通常是因为 Element Plus 使用了自定义的滚动条组件 el-scrollbar,而不是浏览器默认的滚动条。因此,需要针对 el-scrollbar 组件进行样式定制。 <stylescoped>/* 滚动条整体部分 */::v-deep .el-scrollbar__bar...
* 由于表格父容器overflow: hidden;因此无法通过abslute定位来解决,* 目前的解决办法是从表格行中抠出部分高度,修改原有边框的高度,*///设置 表格行总高度.el-scrollbar{.el-scrollbar__wrap{height:calc(100% - $scrollbarheight) !important;}}//清除表格左边框.el-table__border-left-patch{height:0px;...
</el-table> </div> </template> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 然后是script的data部分,我们看看: data() { return { tableData: [ { id: "12987122", ...
【element-plus】Table表格横向滚动条显示不正确解决办法 滚动条bug展示如下: 造成bug原因排查: 由于对Table表格进行了二次封装,传递props属性时,传递了align属性,代码实现如下图: 解决办法 删除align属性,滚动条样式正常回显 在二次封装组件时,需要保证组件属性的输入和透出,尽量避免不必要的bug...
其中,table 组件作为常用的数据展示组件,具有丰富的功能和样式定制选项,然而在使用过程中,我们发现其滚动条样式并不尽人意。 二、element-plus table 滚动条的样式问题 1. element-plus table 组件在展示大量数据时,通常会出现横向或纵向滚动条,以便用户可以浏览全部数据。 2. 然而默认情况下,element-plus table 的...
动态加入数据加上css布局,这就导致了bug,滚动条错位。 注意点:必须要表格的数据获取到,并赋值给table绑定的数据tableData之后,再执行表格的doLayout方法才会生效。这里使用await就是为了确保queryData()结束之后才重新布局表格。 2022/11/20 实际使用官方提供的方法某些情况还是会存在该问题,最后使用的方法是通过v-if...
Reproduction Related Component el-table Reproduction Link Element Plus Playground Steps to reproduce 1、多添加几列,让表格出现横向滚动条 2、让鼠标在滚动条和开启tooltip列的最后一行数据之间,上下往复移动 What is Expected? 不报错 What is actually happening?
问题出现的环境背景及自己尝试过哪些方法 我已经给table绑定过ref并且调用该方法 但是滚动没有效果关于要滚动列的位置 目前的思路是通过设置和prop同名的类来获取位置 你期待的结果是什么?实际看到的错误信息又是什么? element-plus如何横向滚动列位置的获取