话不多说先看效果图
1:html代码
<el-card>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name">
<keep-alive>
<component :is='item.component'></component>
</keep-alive>
</el-tab-pane>
</el-tabs>
</el-card>
2:js代码
import TypeContent from './TypeContent.vue'
import ColumnList from './ColumnList.vue'
export default {
data() {
return {
activeName: 'TypeContent',
tabList: [{
label: '首页类型',
name: 'TypeContent',
component: TypeContent
},
{
label: '栏目类型',
name: 'ColumnList',
component: ColumnList
},
]
}
},
components: {
TypeContent,
ColumnList
},
created() {
},
methods: {
handleClick(tab) {
this.activeName = tab.name;
}
}
}
总结:以上是我参考别的博主写的 地址如下:https://blog.csdn.net/weixin_43503080/article/details/106491697?ops_request_misc=&request_id=&biz_id=102&utm_term=element%20tabs%20%E5%B7%A6%E4%BE%A7%E6%A0%87%E7%AD%BE%E9%A1%B5&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-1-.first_rank_v2_pc_rank_v29&spm=1018.2226.3001.4187