上面是效果图。
下面是使用固定数据写的一个Demo,具体需要接口返回的数据,视情况自己替换。
<template>
<div>
<el-tabs v-model="activeName"
@tab-click="handleClick">
<el-tabs v-model="activeName"
@tab-click="handleClick">
<el-tab-pane v-for="item in tabsArr22"
:key="item.name"
:label="item.label"
:name="item.name">
<component v-if="item.name"
:is="item.name" />
</el-tab-pane>
</el-tabs>
<el-tab-pane v-for="item in tabsArr"
:key="item.name"
:label="item.label"
:name="item.name">
<component v-if="item.name"
:is="item.name" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import interfaceg from './interfaceg.vue'
import zsgl from './zsgl.vue'
import upGkmyd from '@/components/upGkmyd.vue'
import fblh from './fblh.vue'
import hbsc from './hbsc.vue'
import hqfw from './hqfw.vue'
import htfw from './htfw.vue'
import jsgf from './jsgf.vue'
import jxpy from './jxpy.vue'
import projd from './projd.vue'
import rych from './rych.vue'
import sbrj from './sbrj.vue'
import tzjh from './tzjh.vue'
import fxgl from '@/components/fxgl.vue'
import zlmb from '@/components/zlmb.vue'
export default {
components: {
interfaceg,
zsgl,
upGkmyd,
fblh,
hbsc,
hqfw,
htfw,
jsgf,
jxpy,
projd,
rych,
sbrj,
tzjh,
fxgl,
zlmb
},
data () {
return {
activeName: '',
tabsArr: [],
tabsArr22: []
}
},
created () {
// 模拟动态数据
setTimeout(() =>
this.tabsArr = [
{
name: 'interfaceg',
label: '接口管理'
},
{
name: 'upGkmyd',
label: '提升顾客满意度创新措施'
},
{
name: 'zsgl',
label: '知识管理'
},
{
name: 'fxgl',
label: '风险管理'
},
{
name: 'zlmb',
label: '质量目标'
},
{
name: 'projd',
label: '项目关键质量节点评审计划'
},
{
name: 'tzjh',
label: '提资计划管理'
},
{
name: '',
label: '项目总体进度计划'
},
{
name: 'htfw',
label: '项目合同范围及客户'
},
{
name: 'sbrj',
label: '设备软件资源'
},
]
, 0)
// 模拟动态数据
setTimeout(() =>
this.tabsArr22 = [{
name: 'jxpy',
label: '奖项培育'
},
{
name: 'rych',
label: '项目人员,专业策划'
},
{
name: 'hqfw',
label: '后期服务策划'
},
{
name: 'jsgf',
label: '技术标准规范'
},
{
name: 'hbsc',
label: '环保、安全生产'
},
{
name: 'fblh',
label: '项目分包及联合承担工作安排'
}]
, 0)
},
watch: {
tabsArr (newVal) {
if (newVal) {
// 设置初始激活项
this.activeName = newVal[0].name
}
},
deep: true
},
methods: {
handleClick (tab, event) {
// 切换激活项
this.activeName = tab.name
}
},
}
</script>