脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element-ui中多个table在tab切换时出现宽度缩小问题

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论