解决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)
	}