【vue】elementUi 里面的tabs标签页使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

详细介绍如何添加Tabs标签页,很简单的东西,但感觉教程很少,刚刚研究好久才弄好,记录下希望对需要者有帮助。


一、整体页面布局与完成效果

整体界面(mainview.vue)布局如下图:
在红色框部分添加标签页
代码结构
标签页主要在mainview中编写

//mainview.vue
<template>
<el-container>
        <el-header>header顶部栏</el-header>
        <el-container>
            <el-aside>
            aside侧边栏
            <leftbar></leftbar>//leftbar.vue
            </el-aside>
            <el-main>main主界面
            		<el-tabs>标签页
            			<el-tab-pane>
            				标签页显示区域
            			</el-tab-pane>
            		</el-tabs>
            </el-main>
        </el-container>
    </el-container>
 <template>

即在Main中添加Tabs标签页,实现在侧边栏中点击功能键后,在图中红色框部分出现标签,点击可跳转界面。

登陆默认“首页界面”开启且不可关闭,其余界面可手动开启,手动关闭。
完成效果如下图:

在这里插入图片描述

二、代码编写

1.标签页引入

标签页代码如下

	<el-tabs class="tabs" 
	         v-model="editableTabsValue" 
             type="border-card" 
             @tab-remove="removeTab"
             @tab-click="clickTab">
           <el-tab-pane class="tab-pane" 
           				v-for="item in editableTabs" 						      
           				:closable="item.close" 
                        :key="item.name" 
                        :label="item.title" 
                        :name="item.name" >
                         {{item.content}}
                        <RouterView></RouterView>//标签页界面路由显示
            </el-tab-pane>
     </el-tabs>

2.标签页参数设置

2.1 标签页主要参数
标签页的数据存放在vuex的store中,在store.state中添加两个参数的定义,设置的初始数据为“首页界面”的数据。
在这里插入图片描述

state: {
    	//当前打开的界面路由,初始值为主页的路由
    editableTabsValue:'/mainview/index',
    //存放当前打开的标签页的数组,初始时只有首页
    editableTabs:[{
      title:'首页',//标签页名
      name:'/mainview/index',//标签页路由
      close:false//该标签页是否可关闭,这里是首页标签页不可被关闭
    }]
  },

2.2 打开和切换标签页方法
然后在mutation中添加两个方法,操作这两个参数,以控制标签页的打开和切换。
在这里插入图片描述

ADD_TABS:(state,tab)=>{//增加标签页方法
	//在editableTabs中查找此界面是否已打开,否进入if
   if(state.editableTabs.findIndex(e=>e.name===tab.path)===-1){
        state.editableTabs.push({//添加当前标签页进入editableTabs
          title:tab.name,
          name:tab.path,
          close:true//使除了首页标签页外其他都可关闭
        })
      }
      state.editableTabsValue=tab.path//添加标签页后默认打开
},
CHANGE_TABS:(state,name)=>{//切换标签页方法
		 //将需打开标签页路由赋予editableTabsvalue
      state.editableTabsValue=name
},

2.3 mainview中添加数据
在mainview的data中添加并获取state中的数据,注意引入ref
在这里插入图片描述2.4 侧边栏相关设置
在leftbar.vue的data中添加参数submenuList,用于存放侧边导航栏栏位数据。
在这里插入图片描述
此处代码为elementUI导航栏代码,不做过多解释,注意添加opentab方法。
在这里插入图片描述2.5 标签页的打开
opentab方法,点击侧边栏栏位以打开标签页,调用ADD_TABS方法。
注意:1、导入store 2、此方法写在leftbar.vue中,也就是说只有点击侧边栏才能打开标签页。
在这里插入图片描述
在这里插入图片描述

侧边栏效果如下图:
在这里插入图片描述

3.标签页的切换和关闭

3.1切换标签页方法
前面已经在store的mutation中写过打开(ADD_TABS)和切换(CHANGE_TABS)两个方法了,opentab写在侧边栏(leftbar.vue)中,调用了打开方法(ADD_TABS)以实现点击侧边栏打开标签页。
调用切换(CHANGE_TABS)的方法则要写在mainview中,如下图。
在这里插入图片描述
在method中添加clickTab方法

clickTab(tab){
            var name=JSON.stringify(tab.paneName).replace('"','').replace('"','')//对tab参数处理,以获得当前点击的标签页的路由
            store.commit('CHANGE_TABS',name)//调用切换方法切换标签页
            router.push(name)//路由跳转以实现切换界面
    }

3.2 刷新方法
我们需要一个方法在更新完state中的参数,同步更新mainview中的参数。

refreshTabs(){
        // console.log("refresh");
        this.editableTabsValue=store.state.editableTabsValue;
        this.editableTabs=store.state.editableTabs;
    },

代码很简单,直接赋值就可以,重要的是需要在state数据更新时,同步更新mainview中数据,所以需要搞一个监听器,调用refreshTabs方法以实现同步更新数据。

3.3 监听以同步数据
在mainview的watch中,监听state,如有变化则同步更新数据,这样就实现了点击标签页后的实时切换。

watch:{
    "$store.state":{
            deep:true,
            handler:function(){
                this.refreshTabs();
            }
        },

3.4 标签页的关闭
在mainview的method中添加removeTab方法,这里我直接复制了elementUI中的removeTab方法。
这个方法可以实现,关闭一个标签页后,会自动打开旁边的标签页。

removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        store.state.editableTabsValue=activeName;
        store.state.editableTabs=tabs.filter(tab=>tab.name!==targetName);
        router.push(activeName)
    },

总结

好像没什么了,时间有点紧,写的有点乱,需要的同学凑合看吧,希望能有帮助。

  • 14
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
### 回答1: ElementUITabs标签可以通过动态绑定数据来实现动态切换标签的效果。具体实现方法如下: 1. 在Vue组件中定义一个数组,用于存储标签的数据,例如: ``` data() { return { tabs: [ { label: '标签1', name: 'tab1' }, { label: '标签2', name: 'tab2' }, { label: '标签3', name: 'tab3' } ], activeTab: 'tab1' } } ``` 2. 在模板中使用`el-tabs`和`el-tab-pane`组件来渲染标签,例如: ``` <el-tabs v-model="activeTab"> <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name"> {{ tab.label }} 的内容 </el-tab-pane> </el-tabs> ``` 3. 在需要动态切换标签的时候,修改`activeTab`的值即可,例如: ``` this.activeTab = 'tab2'; ``` 这样就可以实现动态切换标签的效果了。 ### 回答2: ElementUI是一款非常受欢迎的基于Vue.js开发的前端UI框架。其中的Tabs组件让我们可以方便地组织和切换多个界面功能,极大地提高了Web应用程序的交互性和用户体验。其中包含了许多可配置的属性和方法,我们可以使用它们来实现一些非常有趣的交互效果。 ElementUITabs组件提供了两种标签类型:固定标签和可滚动标签。在固定标签模式下,标签宽度是固定的,如果标签过多,那么会出现切换不方便的问题。而在可滚动标签模式下,标签会自动适应父容器的宽度,并且在标签过多时,在标签列表右侧会显示左右滚动按钮,以方便用户切换标签ElementUITabs组件还提供了动态添加和删除标签的功能。我们可以使用addTab和removeTab方法在运行时添加或删除标签。addTab方法接收一个包含标签相关信息的对象作为参数,包括标签标题、图标、内容等等。removeTab方法则接收一个标签的key值作为参数,用于标识要删除的标签。 除了这些基本的功能,ElementUITabs组件还提供了许多其他的配置项和事件。例如:可以使用tabPosition属性来指定标签的位置(上、下、左、右),可以使用editable属性来开启或关闭标签编辑功能,可以使用tabClick事件来监听标签点击事件等等。这些特性让Tabs组件非常灵活,可以满足各种复杂的业务场景需求。 总的来说,ElementUITabs组件是一个非常强大的标签组件,可以帮助我们轻松地实现多标签应用程序,并提供各种可配置的功能和事件响应。如果您正在开发Web应用程序,并且需要使用标签功能,ElementUITabs组件将是您不错的选择。 ### 回答3: ElementUI是一个非常流行的Vue.js UI组件库,其中之一的Tabs标签组件可以用于创建标签视图和动态添加或删除标签Tabs标签组件是由一个<el-tabs>组件和一个或多个<el-tab-pane>组成的。 首先,在Vue组件中引入以下内容,使标签组件能够正常工作: ```javascript import { Tabs, TabPane } from 'element-ui' Vue.use(Tabs) Vue.use(TabPane) ``` 然后,我们可以在模板中添加以下内容创建一个基本的标签组件: ```javascript <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.name">{{ item.content }}</el-tab-pane> </el-tabs> ``` 在上述代码中,v-model属性用于绑定当前激活的选项卡的名称,@tab-click事件用于处理标签单击事件。 为了实现动态添加和删除标签的功能,我们需要使用一个数组来存储标签对象,并设置一个指针来跟踪当前激活的标签。每次添加或删除标签时,都需要更新数组并更新指针。 以下是一个示例组件,演示了如何添加和删除标签: ```javascript <template> <div> <div> <el-button @click="addTab">添加标签</el-button> <el-button @click="removeTab">删除标签</el-button> </div> <el-tabs v-model="activeName" editable> <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.name">{{ item.content }}</el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { activeName: 'tab1', tabs: [ { name: '标签1', content: '这是标签1的内容', id: 'tab1' }, { name: '标签2', content: '这是标签2的内容', id: 'tab2' } ] } }, methods: { addTab() { const newTabName = `tab${this.tabs.length + 1}` this.tabs.push({ name: `标签${this.tabs.length + 1}`, content: `这是标签${this.tabs.length + 1}的内容`, id: newTabName }) this.activeName = newTabName }, removeTab() { const tabs = this.tabs const activeName = this.activeName let removeIndex = tabs.findIndex(tab => tab.id === activeName) if (removeIndex === -1) { return } tabs.splice(removeIndex, 1) this.activeName = tabs.length ? tabs[removeIndex > 0 ? removeIndex - 1 : 0].id : '' } } } </script> ``` 上述代码中,addTab方法用于向tabs数组中添加一个新标签对象,并将其设置为当前激活的标签。removeTab方法将从tabs数组中删除当前激活的标签对象,并将activeName更新为上一个标签或第一个标签,如果没有标签,则将activeName设置为空字符串。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值