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

你的名字 2023-10-15 16:07 4阅读 0赞

# 系列文章目录 #

[第一章 定制上中下（顶部菜单、底部区域、中间主区域显示）三层结构首页][Link 1]  
[第二章 使用Vue3、Element-plus菜单组件构建菜单][_Vue3_Element-plus]  
[第三章 使用Vue3、Element-plus走马灯组件构建轮播图][_Vue3_Element-plus 1]  
[第四章 使用Vue3、Element-plus tabs组件构建选项卡功能][_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加载数据  总结 ##

![在这里插入图片描述][9d58062050ad43b5b9b3fc1696d4f774.png]

# 前言 #

在第一章节，我们把博物馆管理系统打了个地基，基本的产品架构和框架已经都落实到位；  
第二章节，使用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>

![在这里插入图片描述][1c30d478db454ac9a73c5129c19a9dbd.png]

## 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>

![在这里插入图片描述][ec0ac4552c214123a56bb6b12efc23e9.png]

## 1.4、标签位置的设置 ##

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

标签一共有四个方向的设置 tabPosition=“left|right|top|bottom”  
![在这里插入图片描述][b3fbf985a2d04feb86d5a912ec4e3b94.png]  
![在这里插入图片描述][f9b80fd67f824dc4beac3947e02a3ce7.png]

## 1.5、Tabs 属性 ##

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>model-value / v-model</td> 
   <td>绑定值，选中选项卡的 name</td> 
   <td>string / number</td> 
   <td>—</td> 
   <td>第一个选项卡的 name</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>风格类型</td> 
   <td>string</td> 
   <td>card/border-card</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>closable</td> 
   <td>标签是否可关闭</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>addable</td> 
   <td>标签是否可增加</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>editable</td> 
   <td>标签是否同时可增加和关闭</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>tab-position</td> 
   <td>选项卡所在位置</td> 
   <td>string</td> 
   <td>top/right/bottom/left</td> 
   <td>top</td> 
  </tr> 
  <tr> 
   <td>stretch</td> 
   <td>标签的宽度是否自撑开</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>before-leave</td> 
   <td>切换标签之前的钩子函数， 若返回 false 或者返回被 reject 的 Promise，则阻止切换。</td> 
   <td>Function(activeName, oldActiveName)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

## 1.6、Tabs 事件 ##

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tab-click</td> 
   <td>tab 被选中时触发</td> 
   <td>(pane: TabsPaneContext, ev: Event)</td> 
  </tr> 
  <tr> 
   <td>tab-change</td> 
   <td>activeName 改变时触发</td> 
   <td>(name: TabPaneName)</td> 
  </tr> 
  <tr> 
   <td>tab-remove</td> 
   <td>点击 tab 移除按钮时触发</td> 
   <td>(name: TabPaneName)</td> 
  </tr> 
  <tr> 
   <td>tab-add</td> 
   <td>点击 tab 新增按钮时触发</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>edit</td> 
   <td>点击 tab 的新增或移除按钮后触发</td> 
   <td>(paneName: TabPaneName</td> 
  </tr> 
 </tbody> 
</table>

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

## 2.1、产品原型图 ##

![在这里插入图片描述][267ab4a284eb4ed89b7f8356bd170483.png]  
![在这里插入图片描述][b855244e8cc24f24bc6a43af19c8aac7.png]  
![在这里插入图片描述][0680027d2cde4aa9a6ab392d1e7c8f10.png]

## 2.2、准备mock数据 ##

mock数据是JSON格式的数据，会使用axios去加载，解析后放置到tabs组件里去显示  
![在这里插入图片描述][7c7d624889c74b2cbc7d5672f4794978.png]

## 2.3、通过axios加载数据 ##

<template>
      <div class="main-box">
        <div class="main">
          
          
          <div style="text-align: center;margin: 60px 2px 20px 2px">
            <h1>主題收藏</h1>
    
    
            
            <div style="margin: 20px 0; text-align: left; ">
              <el-tabs tab-position="bottom" type="border-card"  class="demo-tabs" >
                <el-tab-pane v-for="item in carouseProjectData" :label="item.subTitle" >
                  <el-row :gutter="20">
                    <el-col :span="12"> <img :src="item.picture" style="width: 100%;height: 400px;" alt=""/></el-col>
                    <el-col :span="12">
                      <div class="title">{
       {item.title}}</div>
                      <div class="subTitle"><p v-html="item.content"> </p></div>
                    </el-col>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
            </div>
    
          </div>
          
    
        </div>
      </div>
    </template>
    
    <script>
    
    import axios from "axios";
    
    export default {
      name: 'VueHome',
      data() {
        return { 
          carouseProjectData: [], 
        }
      },
      created() { 
        //获取项目数据
        this.getData("carouseProjectData" , "../../static/mock/project/data.json" );
      
      },
      methods: {
    
        getData(val , url){
          axios.get( url ).then((response) => {
            this[val] = response.data.success.data;
          });
        },
      }
    }
    </script>

--------------------

# 总结 #

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

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

[Link 1]: https://blog.csdn.net/s445320/article/details/132167339
[_Vue3_Element-plus]: https://blog.csdn.net/s445320/article/details/132213400
[_Vue3_Element-plus 1]: https://blog.csdn.net/s445320/article/details/132657721
[_Vue3_Element-plus tabs]: https://blog.csdn.net/s445320/article/details/132666814
[9d58062050ad43b5b9b3fc1696d4f774.png]: https://img-blog.csdnimg.cn/9d58062050ad43b5b9b3fc1696d4f774.png
[1c30d478db454ac9a73c5129c19a9dbd.png]: https://img-blog.csdnimg.cn/1c30d478db454ac9a73c5129c19a9dbd.png
[ec0ac4552c214123a56bb6b12efc23e9.png]: https://img-blog.csdnimg.cn/ec0ac4552c214123a56bb6b12efc23e9.png
[b3fbf985a2d04feb86d5a912ec4e3b94.png]: https://img-blog.csdnimg.cn/b3fbf985a2d04feb86d5a912ec4e3b94.png
[f9b80fd67f824dc4beac3947e02a3ce7.png]: https://img-blog.csdnimg.cn/f9b80fd67f824dc4beac3947e02a3ce7.png
[267ab4a284eb4ed89b7f8356bd170483.png]: https://img-blog.csdnimg.cn/267ab4a284eb4ed89b7f8356bd170483.png
[b855244e8cc24f24bc6a43af19c8aac7.png]: https://img-blog.csdnimg.cn/b855244e8cc24f24bc6a43af19c8aac7.png
[0680027d2cde4aa9a6ab392d1e7c8f10.png]: https://img-blog.csdnimg.cn/0680027d2cde4aa9a6ab392d1e7c8f10.png
[7c7d624889c74b2cbc7d5672f4794978.png]: https://img-blog.csdnimg.cn/7c7d624889c74b2cbc7d5672f4794978.png