关于Element table组件滚动条不显示的踩坑记录

 更新时间:2022年08月27日 10:42:32   作者:达希_  
这篇文章主要介绍了关于Element table组件滚动条不显示的踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

踩坑详情

在多table切换的单个页面内

1、某些table的横向滚动条不自动显示,在手动调整窗体大小或者进行缩放操作时会恢复正常。

如:

2、某些table的横向滚动条显示在表格的中部位置,在在手动调整窗体大小或者进行缩放操作以及表格中数据条目增加到滚动条位置时会恢复正常。

如:

处理办法

看了一下github上有很多类似的issue,但貌似没有得到官方解决。

所以暂且认为是个Bug。

  • 情况1:
  • 经过简单测试,发现滚动条向上偏移的距离和表格的列数有关,列数减少到12列左右就可恢复正常。(P.S. 有很大的可能是列的总宽度和页面大小存在一定关系,这里说的12列是我所测试的特定环境下的合适值,由于时间原因没有深入研究,所以仅供参考)
  • 情况2:
  • 也是简单测试,发现如果存在标题较长的列,发生了换行,如上所示的“标题很长很长很长的测试列”,就会出现前文所述的现象,处理方法是,增加该列的宽度,使其不需要换行,即可恢复正常。

因为测试简单,也没有研究源码,所以得出的结论简单且武断。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 一文详解Vue3中如何使用Vue Router

    一文详解Vue3中如何使用Vue Router

    Vue-Router路由是根据不同的url地址展现不同的内容或页面,这篇文章主要给大家介绍了关于Vue3中如何使用Vue Router的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • elementUI样式修改未生效问题详解(挂载到了body标签上)

    elementUI样式修改未生效问题详解(挂载到了body标签上)

    vue+elementUI项目开发中,经常遇到修改elementUI组件样式无效的问题,这篇文章主要给大家介绍了关于elementUI样式修改未生效问题的相关资料,挂载到了body标签上,需要的朋友可以参考下
    2023-04-04
  • Vue warn:Property "state" was accessed during render解决

    Vue warn:Property "state" was accessed during

    这篇文章主要为大家介绍了Vue warn:Property "state" was accessed during render的报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue修改vue项目运行端口号的方法

    vue修改vue项目运行端口号的方法

    本篇文章主要介绍了vue修改vue项目运行端口号的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Vue2实时监听表单变化的示例讲解

    Vue2实时监听表单变化的示例讲解

    今天小编就为大家分享一篇Vue2实时监听表单变化的示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue3 keep-alive实现tab页面缓存功能

    vue3 keep-alive实现tab页面缓存功能

    如何在我们切换tab标签的时候,缓存标签最后操作的内容,简单来说就是每个标签页中设置的比如搜索条件及结果、分页、新增、编辑等数据在切换回来的时候还能保持原样,这篇文章介绍vue3 keep-alive实现tab页面缓存功能,感兴趣的朋友一起看看吧
    2023-04-04
  • vue 点击展开显示更多(点击收起部分隐藏)

    vue 点击展开显示更多(点击收起部分隐藏)

    这篇文章主要介绍了vue 点击展开显示更多(点击收起部分隐藏),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue如何动态设置class、动态设置style

    vue如何动态设置class、动态设置style

    这篇文章主要介绍了vue如何动态设置class、动态设置style,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue3中ref和reactive的基本使用及区别详析

    Vue3中ref和reactive的基本使用及区别详析

    这篇文章主要给大家介绍了关于Vue3中ref和reactive的基本使用及区别的相关资料,需要的朋友可以参考下
    2022-07-07
  • Vue动画事件详解及过渡动画实例

    Vue动画事件详解及过渡动画实例

    通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作
    2019-02-02

最新评论