[Vue3 博物馆管理系统] 使用Vue3、Element-plus tabs组件构建选项卡功能

系列文章目录

第一章 定制上中下（顶部菜单、底部区域、中间主区域显示）三层结构首页
第二章 使用Vue3、Element-plus菜单组件构建菜单
第三章 使用Vue3、Element-plus走马灯组件构建轮播图
第四章 使用Vue3、Element-plus tabs组件构建选项卡功能
[第五章 使用Vue3、Element-plus菜单组件构建组图文章]

---

文章目录

• 系列文章目录
• • @[TOC](文章目录)
• 前言
• 1、学习Element-plus 的tabs组件选项卡功能
• • 1.1、tabs 组件
  • 1.2、基础用法
  • 1.3、卡片风格的标签
  • 1.4、标签位置的设置
  • 1.5、Tabs 属性
  • 1.6、Tabs 事件
• 2、博物馆管理系统数据展示
• • 2.1、产品原型图
  • 2.2、准备mock数据
  • 2.3、通过axios加载数据
• 总结

前言

在第一章节，我们把博物馆管理系统打了个地基，基本的产品架构和框架已经都落实到位；
第二章节，使用Vue3、Element-plus菜单组件构建顶部区域的菜单，包括父子菜单；
第三章节，使用Vue3、Element-plus走马灯组件构建轮播图；
本章节，我们做1件事：使用Vue3、Element-plus tabs组件构建选项卡功能

1、学习Element-plus 的tabs组件选项卡功能

1.1、tabs 组件

分隔内容上有关联但属于不同类别的数据集合。

1.2、基础用法

基础的、简洁的标签页。

Tabs 组件提供了选项卡功能， 默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>
</template>
        ....................
</el-menu>
1
2
3
4
5
6
7
8
9
10

1.3、卡片风格的标签

可以设置具有卡片风格的标签。

只需要设置 type 属性为 card 就可以使选项卡改变为标签风格。

<template>
  <el-tabs v-model="activeName"  type="card" @tab-click="handleClick">
    <el-tab-pane label="User" name="first">User</el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>
</template>
        ....................
</el-menu>
1
2
3
4
5
6
7
8
9
10

1.4、标签位置的设置

可以通过 tab-position 设置标签的位置

标签一共有四个方向的设置 tabPosition=“left|right|top|bottom”

1.5、Tabs 属性

1.6、Tabs 事件

2、博物馆管理系统数据展示

2.1、产品原型图

2.2、准备mock数据

mock数据是JSON格式的数据，会使用axios去加载，解析后放置到tabs组件里去显示

2.3、通过axios加载数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

---

总结

效果可见地址中间的【主題收藏】模块：http://139.159.230.49/

以上就是今天要讲的内容，本文介绍了在Vue3里，如何使用Element-plus tabs组件构建选项卡功能，如何使用axios去加载Vue项目里的JSON格式文件数据填充到 tabs组件。