如何解决element-ui中多个table在tab切换时出现宽度缩小问题
更新时间：2023年10月19日 08:33:41 作者：蔡挨踢
这篇文章主要介绍了如何解决element-ui中多个table在tab切换时出现宽度缩小问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
解决element-ui中多个table在tab切换时出现宽度缩小问题
用的是vue的element-ui前端框架
今天遇到一个小问题，花了我几个小时才研究
先看图
我需要在两个tab中各自放一个table，并且其中一个table的数据变化时，另一个table也需要变化，当我在第一个table删除数据后，第一个table会刷新，然后第二个table也会刷新。
然后我切换到第二个tab时，table变成这样了，表格的宽度缩小。
研究了好久，最后用
以下方法解决
//我第一个table的ref值为tableContract，第二个table的ref值为tableTodo
//第一个tab的name值为contract，第二个tab的name值为todo
//tab的tab-click事件
tabClick({name}){
//根据点击的tab的name值，判断对应的table
let ref=(name=='contract'?'tableContract':'tableTodo')
this.$nextTick(()=>{
this.$refs[ref].doLayout()
})
}
其实一开始也有用到table的doLayout，但我忽略一个重点的地方，就是用nextTick，记得之前在哪个博客看过，element-ui很多问题用nextTick跟setTimeout都能解决的
更新！！
后面实践后，发现用nextTick还是有点小bug，如下图
这是因为一个tab有滚动条切换到一个没有滚动条的tab，后面用setTimeout就解决问题了，测试过延迟100毫秒，比较完美
//我第一个table的ref值为tableContract，第二个table的ref值为tableTodo
//第一个tab的name值为contract，第二个tab的name值为todo
//tab的tab-click事件
tabClick({name}){
//根据点击的tab的name值，判断对应的table
let ref=(name=='contract'?'tableContract':'tableTodo')
setTimeout(()=>{
this.$refs[ref].doLayout()
},100)
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue中$router.push()路由切换及如何传参和获取参数
这篇文章主要给大家介绍了关于Vue中$router.push()路由切换及如何传参和获取参数的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
文章讲解了如何在Vue项目中使用CSS变量,包括动态计算值和根据条件计算属性,通过示例展示了如何使用CSS变量来实现动画效果和动态样式2025-12-12
下面小编就为大家带来一篇简单谈谈vue的过渡动画(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了vue路径上如何设置指定的前缀，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue项目实现自定义滑块过渡效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
很多情况下程序中使用的打印都是用户无感知的,并且想要灵活的控制打印内容,往往需要借助打印机给我们提供的api再进行开发,这种开发方式非常繁琐,并且开发难度较大,本文给大家介绍了Electron实现静默打印小票的流程,感兴趣的朋友可以参考下2024-06-06
Vue3中使用Proxy实现数据劫持,解决了Vue2中数组和对象劫持的遗留问题,Proxy可以修改某些操作的默认行为,通过get和set方法实现数据的劫持和保护机制,感兴趣的朋友跟随小编一起看看吧2024-11-11
这篇文章主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue + Element 实现按钮指定间隔时间点击思路详解
这篇文章主要介绍了Vue + Element 实现按钮指定间隔时间点击,实现思路大概是通过加一个本地缓存的时间戳，通过时间戳计算指定时间内不能点击按钮，具体实现代码跟随小编一起看看吧2023-12-12
这篇文章主要介绍了结合axios对项目中的api请求进行封装操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论