<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>
