使用el-tab 实现两个tab切换

1、主页面 index.vue

2、tab1：school.vue

3、tab2：parent.vue

具体代码如下：

<template>
  <div class="app-container">
    <!-- 使用el-tabs 实现两个组件的切换 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="学校端" name="first">
        <!-- 路由到school.vue-->
        <school></school>
      </el-tab-pane>
      <el-tab-pane label="家长端" name="second">
        <parent></parent>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import parent from './parent.vue';
import school from './school.vue';

export default {
  components: { parent, school },
  name: "CollectStatistics",
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      console.log(this.activeName);

    },
  },
};
</script>
<style>

</style>

参数说明：

1. el-tabs嵌套el-tab-pane使用
2. el-tabs的v-model对应el-tab-pane的name
3. el-tabs的type可以指定为card,border-card
4. el-tab-pane的label为显示的标签内容，标签的内容在首尾标签内部
5. el-tabs可以设置closable,editable,addable,分别设置tab-remove,edit,tab-add动态修改标签集合
6. 还有tab-click钩子
7. el-tabs中设置tab-position，修改标签位置，可以为top,bottom,left,right

Element - The world's most popular Vue UI framework