VUE表格显示错位的两种解决思路分享

 更新时间:2023年10月19日 14:16:01   作者:Sheen-  
这篇文章主要介绍了VUE表格显示错位的两种解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

VUE表格显示错位的两种解决思路

现在在写的一个项目出现了表格显示错位的问题,如图所示,虽然不影响功能,刷新一下就没了,但是还是挺影响美观的。

可以看见图中有两个错位问题,第一个是滚动条没有在正常的位置,第二个是第一行数据中左右fixed的部分出现在了表格中间。

第一个思路

当然是使用dolayout()

我在调用数据接口之后和在watch里都加了dolayout()函数

  watch: {
    List: {//这里是表格的名字
      // 解决表格显示错位问题
 
      handler () {
        this.$nextTick(() => {
          this.$refs.el_table.doLayout()
        })
 
      },
      deep: true
 
    }

这个方法对大部分情况适用,但并没有解决我的问题。

第二个思路

可以看见错位的滚动条所在叫做 .el-table__body-wrapper

对比可以发现,正常时的 .el-table__body-wrapper的height应该是520px,而错位时height是406px,整个table的height是570px。

解决方法

所以一种方便快速永诀后患的思路就是在css里直接规定.el-table__body-wrapper的height,当然这里有一点要注意,要在前面加一个/deep/,因为这个元素是一个深层元素。

/deep/ .el-table__body-wrapper{
  height: 91.40% !important;
}

我直接将它的高度设定为表格高度的90%左右

固定列显示错位也是同样的思路

/deep/ .el-table__fixed-body-wrapper{
  height: 91.22% !important;
}

总结

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

相关文章

  • Element实现表格嵌套、多个表格共用一个表头的方法

    Element实现表格嵌套、多个表格共用一个表头的方法

    这篇文章主要介绍了Element实现表格嵌套、多个表格共用一个表头的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • vue使用showdown并实现代码区域高亮的示例代码

    vue使用showdown并实现代码区域高亮的示例代码

    这篇文章主要介绍了vue使用showdown并实现代码区域高亮的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue3+TypeScript报错:无法找到模块xx的声明文件问题

    Vue3+TypeScript报错:无法找到模块xx的声明文件问题

    这篇文章主要介绍了Vue3+TypeScript报错:无法找到模块xx的声明文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue-cli基础配置及webpack配置修改的完整步骤

    vue-cli基础配置及webpack配置修改的完整步骤

    这篇文章主要给大家介绍了关于vue-cli基础配置及webpack配置修改的完整步骤,文中通过示例代码介绍的非常详细,对大家的学习或者使用vue-cli具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-10-10
  • 详解vue父子组件关于模态框状态的绑定方案

    详解vue父子组件关于模态框状态的绑定方案

    这篇文章主要介绍了详解vue父子组件关于模态框状态的绑定方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • vue3基础知识剖析

    vue3基础知识剖析

    笔者这篇文章会从vue3基础的知识点开始剖析,特别是在将composition API的时候,在代码示例中不会一上来就使用setup语法糖,而是用早期的setup函数,这样方便于初学的小伙伴们理解跟学习
    2022-08-08
  • Vue 页面权限控制和登陆验证功能的实例代码

    Vue 页面权限控制和登陆验证功能的实例代码

    这篇文章主要介绍了Vue 页面权限控制和登陆验证功能的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • Vue3的vite中图片动态加载3种方式

    Vue3的vite中图片动态加载3种方式

    这篇文章主要给大家介绍了关于Vue3的vite中图片动态加载3种方式的相关资料,图片进入可视区域,进行动态加载图片操作,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Vue axios 将传递的json数据转为form data的例子

    Vue axios 将传递的json数据转为form data的例子

    今天小编就为大家分享一篇Vue axios 将传递的json数据转为form data的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue下拉菜单组件化开发详解

    Vue下拉菜单组件化开发详解

    这篇文章主要为大家详细介绍了Vue下拉菜单组件化开发过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论