Vue + element UI+ Tabs 标签页的使用

话不多说先看效果图

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-2_allsobaiduweb~default-1-.first_rank_v2_pc_rank_v29&spm=1018.2226.3001.4187