欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題

 更新時間：2023年10月19日 08:33:41   作者：蔡挨踢  
這篇文章主要介紹了如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題

用的是vue的element-ui前端框架

今天遇到一個小問題，花了我?guī)讉€小時才研究

先看圖

我需要在兩個tab中各自放一個table，并且其中一個table的數(shù)據(jù)變化時，另一個table也需要變化，當(dāng)我在第一個table刪除數(shù)據(jù)后，第一個table會刷新，然后第二個table也會刷新。

然后我切換到第二個tab時，table變成這樣了，表格的寬度縮小。

研究了好久，最后用

以下方法解決

//我第一個table的ref值為tableContract，第二個table的ref值為tableTodo
//第一個tab的name值為contract，第二個tab的name值為todo
//tab的tab-click事件
tabClick({name}){
	//根據(jù)點擊的tab的name值，判斷對應(yīng)的table
	let ref=(name=='contract'?'tableContract':'tableTodo')
		this.$nextTick(()=>{
			this.$refs[ref].doLayout()
		})
	}

其實一開始也有用到table的doLayout，但我忽略一個重點的地方，就是用nextTick，記得之前在哪個博客看過，element-ui很多問題用nextTick跟setTimeout都能解決的

更新?。?/h2>

后面實踐后，發(fā)現(xiàn)用nextTick還是有點小bug，如下圖

這是因為一個tab有滾動條切換到一個沒有滾動條的tab，后面用setTimeout就解決問題了，測試過延遲100毫秒，比較完美

//我第一個table的ref值為tableContract，第二個table的ref值為tableTodo
//第一個tab的name值為contract，第二個tab的name值為todo
//tab的tab-click事件
tabClick({name}){
	//根據(jù)點擊的tab的name值，判斷對應(yīng)的table
	let ref=(name=='contract'?'tableContract':'tableTodo')
		setTimeout(()=>{
			this.$refs[ref].doLayout()
		},100)
	}

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論