elementul el-menu 和 el-tabs两种方式实现tab切换

 

el-menu

<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
          <el-menu-item index="1">
            <span slot="title">个人</span>
          </el-menu-item>
          <el-menu-item index="2">
            <span slot="title">团队</span>
          </el-menu-item>
          <el-menu-item index="3">
            <span slot="title">渠道</span>
          </el-menu-item>
          <el-submenu index="4">
            <template slot="title">
              <span>公司</span>
            </template>
            <el-menu-item index="4-1">部门</el-menu-item>
            <el-menu-item index="4-2">员工</el-menu-item>
          </el-submenu>
        </el-menu>

el-tabs

<el-tabs v-model="teamActive" @tab-click="teamClick" v-show="activeIndex=='2'">
          <el-tab-pane label="招商工作统计" name="first">
            <team-work-table ref="teamWorkList" :params="params" :year="year" :fatherTime="fatherTime" :month="month"
                             :times="times" :timeType="timeType" :timeSlot="timeSlot" :type="type"
                             :teamFlag="teamFlag"></team-work-table>
          </el-tab-pane>
          <el-tab-pane label="招商阶段统计" name="second">
            <team-stage-table ref="teamStageList" :params="params" :type="type" :teamFlag="teamFlag"></team-stage-table>
          </el-tab-pane>
          <el-tab-pane label="招商数据图表" name="third">
            <funnel-chart :timeType="timeType" :params="params" :year="year"
                                  :month="month" :projectId="projectId"></funnel-chart>
          </el-tab-pane>
        </el-tabs>