// 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)
}
}
}
![]()