如何解决element-ui中多个table在tab切换时出现宽度缩小问题
作者：蔡挨踢
这篇文章主要介绍了如何解决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)
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。