el-tabs标签延迟渲染,解决父子组件异步数据传递问题

      用el-tabs很多次了,今天才注意到tab-pane上提供了一个lazy属性,对于解决父子组件数据传递问题很有帮助。

      举个例子,下面的父组件中调用了子组件child,并传递了一组数据,但这组数据是由接口请求返回的。

<!--父组件-->
<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>

      子组件在mounted中使用由父组件传递的asyncData,由于在mounted时,父组件中的接口还没有返回所需的数据,所以asyncData的取值为undefined,导致子组件中的asyncArray被赋值了一个空数组。即使后面接口返回了所需的数据,子组件中可以取得asyncData的正常值,但由于asyncArray被赋值了空数组,与asyncData指向的不是同一个地址,所以asyncArray的值依然是空数组。

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

      为了解决上面的问题,在文档中发现了tab-pane的lazy属性:

       在默认值为false的情况下,标签页里的内容与标签是同时渲染的,未展开的标签页是display:none;当更改为true以后,未展开的标签并不会渲染,而是等切换之后才会渲染,这样就有足够的时间等接口返回数据了。

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值