一個頁面中有四個切換氛濒,每個切換下面是有一個表格的电湘,此刻的你是要用v-show 還是v-if呢
說一說我的路程:
我首先是用的v-show梅屉,優(yōu)點是:剛進頁面加載4個接口數(shù)據(jù)痢士,因為業(yè)務上這塊的sql比較慢砰琢,所以為了頁面查詢速度的優(yōu)化,我選擇了一次性加載4個接口良瞧,這樣用戶在這個頁面可能會在部門頁簽停留幾秒是很正常的陪汽,這時候調(diào)用其他三個接口花費4-5秒的時間就會被忽略,也會使頁面看起來不是那么卡頓褥蚯。本來以為這個方法很好挚冤,但是bug 來了
火狐54瀏覽器下面會出現(xiàn)節(jié)點錯落,渲染表頭寬度錯亂
這個是測試測出來的赞庶,剛開始一看到我真的是一臉懵逼训挡,出現(xiàn)這個現(xiàn)象的原因是什么呢?
是因為員額法官的表頭有十列數(shù)據(jù)歧强,但是書記員只4列澜薄,但是此刻body里面是有四個表格的節(jié)點存在的,所有導致頁面渲染尋找節(jié)點錯誤摊册,操控了其他隱藏的table節(jié)點
后來我換了v-if肤京,又以為解決了問題,很是開心啊
但是又出現(xiàn)了這樣一個問題
部門頁簽如果我在搜索框里面輸入了123茅特,點到第2頁忘分,此時切換到員額法官,再切換到部門頁簽白修,原來的搜索框里面的值被清空了妒峦,頁數(shù)也被強制換到第1頁
因為他們四個都是加在同一個組件tablecom(我自己封裝的),但是呢兵睛,每當我加載一次頁簽 此節(jié)點是要被銷毀重新加載的肯骇,這個時候就會重新加載組件窥浪,渲染,有這個現(xiàn)象了
后來我是這樣解決的
一次性加載玩四個接口笛丙,但是節(jié)點table每次都重新渲染漾脂,既解決了多個table錯亂問題,也解決了sql查詢慢的問題