layui子页面中添加tab

layui.use(['element'], function () {

    let element=parent.layui.element

    //获取父级页面中是否有相同的lay-id的值，确保打开的tab没有重复

    let lay_id = $(window.parent.document).find("li[lay-id='"+sx_employee.loginname+"']").length

    if(lay_id == 0){

        element.tabAdd('xbs_tab',{

           title:collectionname+"模块管理",

            content:'<iframe data-frameid="id" scrolling="auto" frameborder="0" src="./modul-list.html" style="width:100%height:99%"></iframe>',

            id:"A" //lay-id的值，可以用来判断是否已经打开

        })

    }

    element.tabChange('xbs_tab',"A")

}）

本篇文章使用vue结合element-ui开发tab切换vue的不同组件，每一个tab切换的都是一个新的组件。

1、vue如何使用element-ui

2、创建相应文件。

a、创建父组件 src/components/tabZujian.vue

b、创建自组件（被切换的组件）src/tabComponents 文件夹

+ + tabComponents（目录）

---- tabZujianChild1.vue

---- tabZujianChild2.vue

3、编写组件实现tab切换不同子组件

tabZujian.vue

<template>

<div class="tabZujian">

<el-tabs v-model="activeName">

<el-tab-pane label="tab1" name="first" :key="'first'">

<child1></child1>

</el-tab-pane>

<el-tab-pane label="tab2" name="second" :key="'second'">

<child2></child2>

</el-tab-pane>

</el-tabs>

</div>

</template>

<script>

import tabZujianChild1 from '@/tabComponents/tabZujianChild1'

import tabZujianChild2 from '@/tabComponents/tabZujianChild2'

export default {

name: 'tabZujian',

components:{

child1:tabZujianChild1,

child2:tabZujianChild2

},

data() {

return { //默认第一个选项卡

activeName: "first",

}

}

}

</script>

tabZujianChild1.vue

<template>

<div class="child1">我是第一个自组件 </div>

</template>

<script>export default {

name: 'child1',

mounted(){

console.log("tab1组件")

}

} <

/script><

tabZujianChild2.vue

[template>

<div class="child2">我是第二个子组件 </div>

</template>

<script>export default {

name: 'child1',

mounted(){

console.log("tab2组件")

}

} </script><

[

默认是tab1显示　切换到tab2显示也成功了

!* 但是不知道同学们是否注意到：

1、我在每个子组件的mounted生命周期钩子函数下分别打印了两个不同的文本

2、当路由到这个tab页面的时候，应该是没注意控制台是打印了当前显示的tab1组件中的console还是tab2组件的console

3、当你打开控制台的时候，你会很惊讶的发现。两个组件之中的console都被打印了。这说明，并不是我想象的，tab到1时候打印组件1；tab到2时候打印组件2

4、解决

这时候当你来回切换的时候，通过v-if判断是否重新渲染当前组件

更改一下tabZujian.vue

<template>

<div class="tabZujian">

<el-tabs v-model="activeName" @tab-click="handleClick">

<el-tab-pane label="tab1" name="first" :key="'first'">

<child1 v-if="isChildUpdate1"></child1>

</el-tab-pane>

<el-tab-pane label="tab2" name="second" :key="'second'">

<child2 v-if="isChildUpdate2"></child2>

</el-tab-pane>

</el-tabs>

</div>

</template>

<script>

import tabZujianChild1 from '@/tabComponents/tabZujianChild1'

import tabZujianChild2 from '@/tabComponents/tabZujianChild2'

export default {

name: 'tabZujian',

components:{

child1:tabZujianChild1,

child2:tabZujianChild2

},

data() { return { //默认第一个选项卡

activeName: "first",

isChildUpdate1:true,

isChildUpdate2:false

}

},

methods:{

handleClick(tab) {

if(tab.name == "first") {

this.isChildUpdate1 = true

this.isChildUpdate2 = false

} else if(tab.name == "second") {

this.isChildUpdate1 = false

this.isChildUpdate2 = true

}

}

}

} </script>

这回当你没吃切换tab的时候在注意v8的console

成功了

---