解决elenemtUi中使用el-tabs组件多个标签页切换el-table时，出现宽度压缩(缩小)的问题

用的是vue2和element-ui，在开发时遇到的小问题，找了好长时间的原因，先看出现问题的图片如下所示:

正常情况应该是在切换el-tabs标签页的时候表格el-table的宽度是不会发生改变的，正常情况如下图所示:

我觉得el-table的宽度发生问题是和el-tabs切换的动画有关系，原因可能是el-tabs的动画还没有完成而el-table的宽度就开始计算了导致表格宽度开始动画未加载完成是50%左右，后来动画加载完成了有变成100%

当在每个el-tabs页中都放入不同的el-table表格然后进行切换不同的标签页，这个时候会看到el-table表格的宽度大概会变成50%，然后再变成100%，看着就像卡顿了一下看着很不美观：具体原因看效果图展示的如下：

解决方法就是使用el-table组件中的doLayout()方法是用来重新计算组件大小和位置的。当我们对组件进行动态修改后，可能会导致组件大小或者位置发生改变，此时可以调用 doLayout() 方法来重新计算并更新组件的布局。

使用方法如下：

在需要更新布局的组件上添加 ref 属性，比如：

<el-table ref="myTable"></el-table>

在组件中调用 doLayout() 方法即可：

this.$refs.myTable.doLayout();

这样就会重新计算并更新表格的布局。

需要注意的是，doLayout() 方法只能在组件完全渲染后才能调用，否则可能会出现计算不准确的情况。因此建议将 doLayout() 方法放在 nextTick 回调函数中执行或者放在setTimeout中，以确保组件已经完全渲染：

this.$nextTick(() => {
  this.$refs.myTable.doLayout();
});

setTimeout(()=>{
  this.$refs.myTable.doLayout();
},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')
		this.$nextTick(()=>{
			this.$refs[ref].doLayout()
		})
	}
————————————————
版权声明：本文为CSDN博主「Nazgul丶戒灵」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chuxuan0215/article/details/100522348

//我第一个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)
	}
————————————————
版权声明：本文为CSDN博主「Nazgul丶戒灵」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chuxuan0215/article/details/100522348

解决elenemtUi中使用el-tabs组件多个标签页切换el-table时，出现宽度压缩(缩小)的问题

猜你喜欢