<
div
>
<
v-breadcrumb
/>
<
div
class=
"combat"
>
<
el-tabs
v-model="
tabName"
type=
"card"
class=
"tab-section" @
tab-click="
changeTab()"
>
<
el-tab-pane
label=
"tab1"
name=
"tab1"
>
<
CombatCampsite
v-if="
tabName ===
'tab1'"
/>
</
el-tab-pane
>
<
el-tab-pane
label=
"tab2"
name=
"tab2"
>
<
CombatCourse
v-if="
tabName ===
'tab2'"
/>
</
el-tab-pane
>
<
el-tab-pane
label=
"tab3"
name=
"tab3"
>
<
CombatSingletemplate
v-if="
tabName ===
'tab3'"
/>
</
el-tab-pane
>
<
el-tab-pane
label=
"tab4"
name=
"tab4"
>
<
CombatClass
v-if="
tabName ===
'tab4'"
/>
</
el-tab-pane
>
<
el-tab-pane
label=
"tab5"
name=
"tab5"
>
<
CombatHomework
v-if="
tabName ===
'tab5'"
/>
</
el-tab-pane
>
</
el-tabs
>
</
div
>
</
div
>
</
template
>
<
script
type=
"text/javascript"
>
import
Breadcrumb
from
'@/components/BasicBreadcrumb.vue';
import
CombatCampsite
from
'./CombatCampsite.vue';
import
CombatClass
from
'./CombatClass.vue';
import
CombatCourse
from
'./CombatCourse.vue';
import
CombatHomework
from
'./CombatHomework.vue';
import
CombatSingletemplate
from
'./CombatSingletemplate.vue';
export
default {
data() {
return {
tabName:
'combat-campsite',
combatList:
''
}
},
methods: {
changeTab() {
if(
name ===
'tab1') {
this.
tabName =
'tab1'
}
else
if (
name ===
'tab2') {
this.
tabName =
'tab2'
}
else
if (
name ===
'tab3') {
this.
tabName =
'tab3'
}
else
if (
name ===
'tab4') {
this.
tabName =
'tab4'
}
else
if (
name ===
'tab5') {
this.
tabName =
'tab5'
}
}
},
components: {
CombatSingletemplate,
CombatHomework,
CombatCourse,
CombatClass,
CombatCampsite,
'v-breadcrumb'
:
Breadcrumb,
},
}
</
script
>
<
style
type=
"text/css"
lang=
"less"
>
</
style
>