vue tabs标签页 点击才加载

使用v-if

v-if="shellOpen

tabs标签页,默认加载显示第1个tab;

<el-tabs v-model="tTab" type="card" style="height:100%" @tab-click="tTabClick">
    <el-tab-pane label="Jupyter" name="Jupyter">
        <modelList></modelList>
    </el-tab-pane>
    <el-tab-pane label="Shell终端" name="shell" @tab-click="tTabClick">
        <el-tabs v-model="bTab" tab-position="left" style="height:100%" @tab-click="bTabClick" v-if="shellOpen">
            <el-tab-pane label="shell" name="shell">
                <shellList></shellList>
            </el-tab-pane>
        </el-tabs>
    </el-tab-pane>
    <el-tab-pane label="容器实例" name="docker" @tab-click="tTabClick">
        <el-button>33333333</el-button>
    </el-tab-pane>
    <el-tab-pane label="基本信息" name="baseInfo" @tab-click="tTabClick">
        <el-button>44444444</el-button>
    </el-tab-pane>

当tab.name等于shell时,才加截显示第二个。

tTabClick(tab,index){
    console.log("tTabClick");
    console.log(tab);
    console.log(index);
    this.tTab = tab.name
    if(tab.name == 'shell'){
        this.shellOpen = true;
    }
},

参考:

blog.csdn.net/qq_41880073/article/details/120175893
vue项目中使用element-ui的tab标签页,点击切换的时候,只显示初始加载的echarts,其他tab页面不加载echarts

猜你喜欢

转载自blog.csdn.net/hezhenfei8/article/details/124293525