当前位置:   article > 正文

elementul el-menu 和 el-tabs两种方式实现tab切换_element的tab页面切换

element的tab页面切换

 

el-menu

  1. <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect">
  2. <el-menu-item index="1">
  3. <span slot="title">个人</span>
  4. </el-menu-item>
  5. <el-menu-item index="2">
  6. <span slot="title">团队</span>
  7. </el-menu-item>
  8. <el-menu-item index="3">
  9. <span slot="title">渠道</span>
  10. </el-menu-item>
  11. <el-submenu index="4">
  12. <template slot="title">
  13. <span>公司</span>
  14. </template>
  15. <el-menu-item index="4-1">部门</el-menu-item>
  16. <el-menu-item index="4-2">员工</el-menu-item>
  17. </el-submenu>
  18. </el-menu>

el-tabs

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/581696
推荐阅读
相关标签
  

闽ICP备14008679号