如何解决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.set()动态的新增与修改数据,触发视图更新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue中的公共方法调用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue可ctrl,shift多选,可添加标记日历组件详细，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
在 Vue.js 中，$emit和$on方法是两个常用的方法，用于实现组件间的通信，虽然它们的名字很相似，但它们的作用和用法有所不同，本文将介绍$emit和$on方法的区别，并通过代码示例来说明它们的用法,感兴趣的朋友可以参考下2023-07-07
本文主要介绍了vue-cli5关于yarn的一个小坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
vue Element UI扩展内容过长使用tooltip显示
这篇文章主要为大家介绍了vue Element UI扩展内容过长使用tooltip展示鼠标hover时的提示信息，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue数组中不满足条件跳出循环问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
ESLint主要用于代码规范、统一代码风格,下面这篇文章主要给大家介绍了关于vue3配置ESLint的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
数据可视化是现代Web应用程序中的一个重要组成部分，词云是一种非常流行的数据可视化形式，可以用来展示文本数据中的主题和关键字，本文我们将介绍如何在Vue中使用词云库进行数据可视化词云展示和词云生成，需要的可以参考一下2023-06-06
这篇文章主要给大家介绍了关于vue中v-model失效原因以及解决方案的相关资料,vue的v-model是一个双向绑定的数据流,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
最新评论