方式一
<el-tabs type="border-card">
// type的值也可为 card
<el-tab-pane label="设置">
<aa></aa>
</el-tab-pane>
<el-tab-pane label="查看">
<bb></bb>
</el-tab-pane>
</el-tabs>
<script>
import aa from '../aa'
import bb from '../bb'
export default {
name: 'Tabs',
components: {
aa,
bb
},
data () {
return {}
},
methods: {}
};
</script>
方式二
<div class="tabZujian">
<el-tabs
v-model="activeName"
@tab-click="handleClick"
>
<el-tab-pane
label="设置"
name="first"
:key="'first'"
>
<aa
v-if="isChildUpdate1"
@saveFrom="saveFrom"
></aa>
</el-tab-pane>
<el-tab-pane
label="查看"
name="second"
:key="'second'"
>
<bb
v-if="isChildUpdate2"
@editData="editData"
></bb>
</el-tab-pane>
</el-tabs>
</div>
<script>
import aa from '../aa'
import bb from '../bb'
export default {
name: 'Tabs',
components: {
aa,
bb
},
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;
}
},
editData (id) {
this.activeName = "first"
this.isChildUpdate1 = true;
this.isChildUpdate2 = false;
},
saveFrom () {
this.activeName = "second"
this.isChildUpdate1 = false;
this.isChildUpdate2 = true;
}
}
};
</script>