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;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue2实现传送门效果的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
使用Vue Composition API写出清晰、可扩展的表单实现
这篇文章主要介绍了使用Vue Composition API写出清晰、可扩展的表单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要为大家详细介绍了Vue中自定义指令directive的使用方法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-04-04
van-uploader保存文件到后端回显后端接口返回的数据
前端开发想省时间就是要找框架呀,下面这篇文章主要给大家介绍了关于van-uploader保存文件到后端回显后端接口返回的数据,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
在Vue3.5版本中,响应式Props的解构功能正式转正,该功能允许即使在解构后也不丢失响应性,文通过编译阶段的处理,如何保持解构后的props变量仍保持响应性,编译过程中的defineProps宏函数处理,通过AST和上下文操作实现变量替换,从而让解构后的变量在运行时维持响应式状态2024-09-09
本文主要介绍了在vue3中使用jsx的配置以及一些小问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
这几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的，然后就很顺利的遇到了在安卓端扫码的时候，顺利的一塌糊涂，然后到了苹果端的时候，就只能出现一个保存图片，然后就写一下记录一下这问题的解决方法2020-01-01
这篇文章主要为大家详细介绍了利用vue的监听事件实现一个简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
这篇文章主要介绍了Vue项目的网络请求代理到封装步骤,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
本文主要介绍了Element中Select选择器的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论