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;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue下history模式刷新后404错误解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
vue计算属性computed--getter和setter用法
这篇文章主要介绍了vue计算属性computed--getter和setter用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue3继承并扩展三方组件完成二次封装,文章使用naiveui的Input组件进行举例,elementPlus或者其他组件库同理,并通过代码示例讲解的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了在Vue中使用Echarts++封装,需要的朋友可以参考下2023-11-11
在本篇文章里小编给大家分享了关于在vue项目中引入vue-beauty操作方法，有需要的朋友们跟着学习参考下。2019-02-02
最近在使用vite生成项目,这篇文章主要给大家介绍了关于vue3+vite中开发环境与生产环境全局变量配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue3.0实现插件封装的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了Vue.js之VNode的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
webpack+vue-cil 中proxyTable配置接口地址代理操作
这篇文章主要介绍了webpack+vue-cil 中proxyTable配置接口地址代理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
虚拟DOM是一种用JavaScript对象来描述真实DOM的技术,通过diff算法实现高效的DOM更新,提高页面性能,Vue通过render函数和VNode实现虚拟DOM,结合diff算法减少DOM操作,提升用户体验2024-12-12
最新评论