70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
|
|
<!-- <el-tab-pane v-for="tab in tabList" :name="tab.id" :key="tab.id" :label="tab.name">-->
|
|
<!-- <transition name="fade" mode="out-in">-->
|
|
<!-- <component :is="activeTab"/>-->
|
|
<!-- </transition>-->
|
|
<!-- </el-tab-pane>-->
|
|
<el-tab-pane label="企业" name="CorpInfo">
|
|
<transition name="fade" mode="out-in">
|
|
<component :is="CorpInfo"/>
|
|
</transition>
|
|
</el-tab-pane>
|
|
<el-tab-pane lazy label="隐患" name="Hidden">
|
|
<transition name="fade" mode="out-in">
|
|
<component :is="Hidden"/>
|
|
</transition>
|
|
</el-tab-pane>
|
|
<el-tab-pane lazy label="风险分布" name="Risk">
|
|
<transition name="fade" mode="out-in">
|
|
<component :is="Risk"/>
|
|
</transition>
|
|
</el-tab-pane>
|
|
<el-tab-pane lazy label="重大危险源" name="Danger">
|
|
<transition name="fade" mode="out-in">
|
|
<component :is="Danger"/>
|
|
</transition>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<!-- <el-radio-group v-model="activeTab" @tab-click="handleClick">-->
|
|
<!-- <el-radio-button v-for="tab in tabList" :name="tab.id" :key="tab.id" :label="tab.name">{{ tab.name }}</el-radio-button>-->
|
|
<!-- </el-radio-group>-->
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import CorpInfo from './components/corpinfo'
|
|
import Hidden from './components/hidden'
|
|
import Risk from './components/risk'
|
|
import Danger from './components/danger'
|
|
export default {
|
|
components: {
|
|
CorpInfo: CorpInfo,
|
|
Hidden: Hidden,
|
|
Risk: Risk,
|
|
Danger: Danger
|
|
},
|
|
data() {
|
|
return {
|
|
activeTab: 'CorpInfo',
|
|
tabList: [
|
|
{ id: 'CorpInfo', name: '企业' },
|
|
{ id: 'Hidden', name: '隐患' },
|
|
{ id: 'Risk', name: '风险' },
|
|
{ id: 'Danger', name: '危险源' }
|
|
],
|
|
CorpInfo: 'CorpInfo',
|
|
Hidden: 'Hidden',
|
|
Risk: 'Risk',
|
|
Danger: 'Danger'
|
|
}
|
|
},
|
|
methods: {
|
|
handleClick(tab) {
|
|
this.activeTab = tab.name
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|