Element框架el-tab點擊標簽頁時再渲染問題的解決

更新時間：2022年04月15日 10:13:39 作者：尋瀑

本文主要介紹了Element框架el-tab點擊標簽頁時再渲染問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

之前一直以為這種標簽頁加載時要么同時渲染，加載所有頁面；要么通過el-tab的@tab-click事件，通過判斷tab.name選擇加載。但是后者有兩個弊端：（1）頁面仍然一下子渲染，向后臺請求許多接口，造成頁面加載緩慢，無法實現(xiàn)實時渲染的效果（2）不能解決父子組件數(shù)據(jù)傳遞的問題）

1. 父子組件數(shù)據(jù)傳遞問題：

<!--父組件-->
<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="我的行程" name="1">
        <child :asyncData="asyncData"></child>
    </el-tab-pane>
    <el-tab-pane label="消息中心" name="2">配置</el-tab-pane>
</el-tabs>

//子組件
export default{
    data(){
        return{
            asyncArray:[]
        }
    },
    props:{
        asyncData : Array
    },
    mounted(){
        this.asyncArray = this.asyncData || []
    }
}

上面的例子中，父組件調(diào)用子組件child，同時向子組件傳遞了一個數(shù)組asyncData，且變量asyncData的值是由接口請求返回的。

子組件在mounted中使用由父組件傳遞的asyncData，但是在mounted時，父組件的接口還沒有返回所需的數(shù)據(jù)，因此asyncData返回值為undefined，導致子組件中的asyncArray被賦值為空數(shù)組。即使后面接口返回了所需的數(shù)據(jù)，子組件中可以取得asyncData的正常值。但由于asyncArray已被賦值為空數(shù)組，與asyncData指向的不是同一個地址，所以asyncArray的值依然是空數(shù)組。

2.lazy屬性

在element官網(wǎng)中發(fā)現(xiàn)了lazy屬性：

在默認值為false的情況下，標簽頁里的內(nèi)容與標簽是同時渲染的，未展開的標簽頁時display:none；當更改為true以后，未展開的標簽頁并不會渲染，二十等切換之后才會渲染，這樣不僅實現(xiàn)了實時加載標簽頁內(nèi)容的效果，同時也有足夠的時間等待接口返回數(shù)據(jù)。

到此這篇關于Element框架el-tab點擊標簽頁時再渲染問題的解決的文章就介紹到這了,更多相關Element el-tab渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: