如何解決element-ui中多個(gè)table在tab切換時(shí)出現(xiàn)寬度縮小問(wèn)題
解決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í)一開(kāi)始也有用到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è)沒(méi)有滾動(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)文章
Vue中$router.push()路由切換及如何傳參和獲取參數(shù)
這篇文章主要給大家介紹了關(guān)于Vue中$router.push()路由切換及如何傳參和獲取參數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-03-03
文章講解了如何在Vue項(xiàng)目中使用CSS變量,包括動(dòng)態(tài)計(jì)算值和根據(jù)條件計(jì)算屬性,通過(guò)示例展示了如何使用CSS變量來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果和動(dòng)態(tài)樣式2025-12-12
簡(jiǎn)單談?wù)剉ue的過(guò)渡動(dòng)畫(huà)(推薦)
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單談?wù)剉ue的過(guò)渡動(dòng)畫(huà)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了vue路徑上如何設(shè)置指定的前綴，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過(guò)渡效果
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)自定義滑塊過(guò)渡效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
Electron實(shí)現(xiàn)靜默打印小票的流程詳解
很多情況下程序中使用的打印都是用戶(hù)無(wú)感知的,并且想要靈活的控制打印內(nèi)容,往往需要借助打印機(jī)給我們提供的api再進(jìn)行開(kāi)發(fā),這種開(kāi)發(fā)方式非常繁瑣,并且開(kāi)發(fā)難度較大,本文給大家介紹了Electron實(shí)現(xiàn)靜默打印小票的流程,感興趣的朋友可以參考下2024-06-06
vue3中的數(shù)據(jù)劫持的最新實(shí)現(xiàn)方案的proxy示例詳解
Vue3中使用Proxy實(shí)現(xiàn)數(shù)據(jù)劫持,解決了Vue2中數(shù)組和對(duì)象劫持的遺留問(wèn)題,Proxy可以修改某些操作的默認(rèn)行為,通過(guò)get和set方法實(shí)現(xiàn)數(shù)據(jù)的劫持和保護(hù)機(jī)制,感興趣的朋友跟隨小編一起看看吧2024-11-11
vue在App.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作
這篇文章主要介紹了vue在App.vue文件中監(jiān)聽(tīng)路由變化刷新頁(yè)面操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊思路詳解
這篇文章主要介紹了Vue?+?Element?實(shí)現(xiàn)按鈕指定間隔時(shí)間點(diǎn)擊,實(shí)現(xiàn)思路大概是通過(guò)加一個(gè)本地緩存的時(shí)間戳，通過(guò)時(shí)間戳計(jì)算指定時(shí)間內(nèi)不能點(diǎn)擊按鈕，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧2023-12-12
結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作
這篇文章主要介紹了結(jié)合axios對(duì)項(xiàng)目中的api請(qǐng)求進(jìn)行封裝操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09