创新实训博客（18）——Vue中标签页组件动态化

前言

Element UI提供了Tabs组件来实现标签页功能。

基本的用法：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>

以官方文档中的例子来说，首先需要一个大的<el-tabs>标签，来表明这是一个标签页显示的组件。

然后每个小的标签页使用<el-tab-pane>组件，在里面添加对应的内容。

label表示的在界面的标签栏中实际所显示的部分。

name可有可无，可以用来筛选不同的标签页。

tab-click表示的是点击标签页的对应的函数，比如说我捕获到了一个点击的请求，然后执行相应的函数，切换相应的页面。

博客推荐系统的相关需求

官方提供的例子，