tab切换

// index.vue

<el-tabs
        v-model="activeName"
        type="card"
        style="margin-top:28px;"
        @tab-click="handleClick"
      >
        <el-tab-pane label="tab1" name="A">
          <base-info v-if="activeName == 'A'" /> // base-info组件名
        </el-tab-pane>
        <el-tab-pane label="tab2" name="B">
          <base-info v-if="activeName == 'B'" />
        </el-tab-pane>
        <el-tab-pane label="tab3" name="C">
          <base-info v-if="activeName == 'C'" />
        </el-tab-pane>
</el-tabs>

import BaseInfo from "./components/BaseInfo.vue"; // 引入tab1的组件

export default {
    components: {
        BaseInfo,
    },
    data() {
      return {
        activeName: "A" // 默认第一个tab高亮
      };
    },      
    methods: {
      handleClick(e) {
        // console.log('activeName', this.activeName)
      }
    }    
}

 

posted @ 2021-10-12 15:06  挽你手  阅读(44)  评论(0编辑  收藏  举报