亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

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

今天遇到一個(gè)小問(wèn)題，花了我?guī)讉€(gè)小時(shí)才研究

先看圖

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

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

研究了好久，最后用

以下方法解決

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

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

更新?。?/h2>

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

這是因?yàn)橐粋€(gè)tab有滾動(dòng)條切換到一個(gè)沒有滾動(dòng)條的tab，后面用setTimeout就解決問(wèn)題了，測(cè)試過(guò)延遲100毫秒，比較完美

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

總結(jié)

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

相關(guān)文章

最新評(píng)論