Element框架el-tab点击标签页时再渲染问题的解决

之前一直以为这种标签页加载时要么同时渲染，加载所有页面；要么通过el-tab的@tab-click事件，通过判断tab.name选择加载。但是后者有两个弊端：（1）页面仍然一下子渲染，向后台请求许多接口，造成页面加载缓慢，无法实现实时渲染的效果（2）不能解决父子组件数据传递的问题）

1. 父子组件数据传递问题：

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

上面的例子中，父组件调用子组件child，同时向子组件传递了一个数组asyncData，且变量asyncData的值是由接口请求返回的。

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

2.lazy属性

在element官网中发现了lazy属性：

在默认值为false的情况下，标签页里的内容与标签是同时渲染的，未展开的标签页时display:none；当更改为true以后，未展开的标签页并不会渲染，二十等切换之后才会渲染，这样不仅实现了实时加载标签页内容的效果，同时也有足够的时间等待接口返回数据。

到此这篇关于Element框架el-tab点击标签页时再渲染问题的解决的文章就介绍到这了,更多相关Element el-tab渲染内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

  • Element框架el-tab点击标签页时再渲染问题的解决

    Element框架el-tab点击标签页时再渲染问题的解决

    之前一直以为这种标签页加载时要么同时渲染,加载所有页面:要么通过el-tab的@tab-click事件,通过判断tab.name选择加载.但是后者有两个弊端:(1)页面仍然一下子渲染,向后台请求许多接口,造成页面加载缓慢,无法实现实时渲染的效果(2)不能解决父子组件数据传递的问题) 1. 父子组件数据传递问题: <!--父组件--> <el-tabs v-model="activeName" @tab-click="handleClick">

  • Bootstrap开发中Tab标签页切换图表显示问题的解决方法

    Bootstrap开发中Tab标签页切换图表显示问题的解决方法

    前言 在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其他页面的时候显示内容没有发生动态的调整,本篇随笔介绍解决Tab标签页切换图表显示问题,以及图表控件可以实现窗口动态变化进行调整尺寸. 1)常规的图表处理 例如下面界面有两个Tab标签页,如下所示,第一个标签页显示正常. 部分界面代码如下所示 <div class="portlet-bod

  • 如何利用Vue3+Element Plus实现动态标签页及右键菜单

    目录 1 前言 1.1 目的 1.2 普通右键菜单 1.3 本文右键菜单方式 2 生成动态标签页 2.1 准备变量容器 2.2 构造标签页 2.3 动态添加标签页 2.4 动态移除标签页 3 生成右键菜单 3.1 扩展标签页 3.2 增加 show 方法 3.3 扩展 removeTab 方法 3.4 解决重复出现菜单问题 3.5 解决自定义标签样式问题 总结 1 前言 1.1 目的 Tabs 动态标签页实现右键菜单[关闭当前标签页].[关闭左侧标签页].[关闭右侧标签页].[关闭其他标签页].

  • 浏览器切换到其他标签页或最小化js定时器是否准时测试

    浏览器切换到其他标签页或最小化js定时器是否准时测试

    目录 前言 浏览器可见和不可见状态 setInterval setTimeout requestAnimationFrame 总结 如何解决 前言 这是我最近开发碰到的一个问题,本文是我测试出来的实践结果,供大家参考. 关于js定时器,setInterval和setTimeout,作为我们日常开发经常使用到的方法,大家一定非常熟悉.比如下面一个例子: setInterval(() => { console.log('1'); }, 500); 作为刚学前端没多久的新人也能知道,这段代码就是每过5

  • vue实现兄弟组件之间跳转指定tab标签页

    目录 兄弟组件之间如何跳转指定tab标签页 场景 vue.js实现tab页面的跳转 tab标签 tab标签对应的展示的内容 vue实例中对应的数据以及函数 兄弟组件之间如何跳转指定tab标签页 场景 index跳转至list的第三个标签栏并刷新列表 // index methods: {      ...      go(){       this.$router.push({         name: 'list',        //要跳转的路由name         query: {

  • jqueryUI tab标签页代码分享

    本文实例为大家分享了jqueryUI tab标签页的具体代码,供大家参考,具体内容如下 var temp=1; var arr=["我的首页"]; //×号点击关闭li $("#tabs").delegate( ".ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( &quo

  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着

  • vue-router实现tab标签页（单页面）详解

    vue-router 是 Vue.js 官方的路由插件,适合用于构建标签页应用.Vue 的标签页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,vue-router 会把各个组件渲染到正确的地方. 首先,.vue中的内容非常简单,<router-link>创建标签,并指定路径,<router-view>渲染路由匹配到的组件. <template> <div id="account"> <p class=&quo

  • Bootstrap每天必学之标签页（Tab）插件

    Bootstrap每天必学之标签页（Tab）插件

    标签页(Tab)通过结合一些 data 属性,您可以轻松地创建一个标签页界面. "如果您想要单独引用该插件的功能,那么您需要引用 tab.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js." 一.用法 您可以通过以下两种方式启用标签页: 通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚

  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

随机推荐