el-tabs(标签栏)的入门学习

最新推荐文章于 2026-05-20 18:08:23 发布

原创

最新推荐文章于 2026-05-20 18:08:23 发布 · 5.8k 阅读

标签

#vue.js #elementui

收录于

本文主要介绍el-tabs（标签栏）的入门知识。阐述其适用场景，如点击导航栏在主页面上方追加标签栏。还讲解了相关知识点，包括el-tabs嵌套el-tab-pane使用、v-model与name对应、type指定、标签内容设置、动态修改标签集合及tab-click钩子等，最后提及官网。

el-tabs(标签栏)的入门学习
适用场景
与导航栏相似，项目中常见的是点击某个导航栏，主页面（el-main）模块的最上方会显示我们的标签栏集合，点击不同的导航栏，标签栏会在不断追加，若点击到标签集合中已存在，就进入选中指定的标签栏，显示页面

知识点

el-tabs嵌套el-tab-pane使用
el-tabs的v-model对应el-tab-pane的name
el-tabs的type可以指定为card,border-card
el-tab-pane的label为显示的标签内容，标签的内容在首尾标签内部
el-tabs可以设置closable,editable,addable,分别设置tab-remove,edit,tab-add动态修改标签集合
还有tab-click钩子
el-tabs中设置tab-position，修改标签位置，可以为top,bottom,left,right

效果图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ok060

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Element UI 之 Tabs 栏下拉菜单的实现

qq_41548644的博客

08-09

8586

Element UI 之 Tabs 栏下拉菜单的实现产品小姐姐有一个业务需求，Tabs 组件某个 Tab 为下拉菜单，效果如下：业务代码比较多，这里弄了一个小 Demo，以供参考，效果如下：一、思路通过 el-tab-pane 的 name 值判断为是否指定下拉 tab 栏然后利用组件提供的具名 slot 嵌入 el-dropdown 组件在 el-dropdown 中通过双向绑定，实现单选或多选（PS: 多选实现，需要设置菜单隐藏方式。涉及样式代码较多，本文没有弄这一步）二、完整

参与评论您还未登录，请先登录后发表或查看评论

vue+element-ui el-tabs切换面板el-tab-pane切换

花椒和蕊的博客

03-01

1万+

在vue项目中，el-tabs在页面的右侧显示，切换面板，下面的内容是正常显示的效果如下：代码如下：父组件 <el-card> <span>数据信息</span> <el-tabs class="tabRight" v-model="activeName" type="card" @tab-click="handleClick"

Element UI 的 Tabs 标签页开发教程

最新发布

wobenwoxiangfei的博客

05-20

240

Element UI 的标签页样式比较固定。如需深度定制（如修改下划线颜色），需要使用深度选择器（如。：如果标签页内容是通过异步数据渲染的，切换标签时可能会出现“闪屏”或数据不同步。属性，可以将标签栏放置在容器的左侧、右侧、顶部（默认）或底部。如果某个标签页内容非常复杂（如包含大型表格或图表），可以使用。在需要动态管理标签（如浏览器标签页）的场景下，可以使用。属性，可以改变标签页的外观，常用于更紧凑的布局。（'add' 或 'remove'）操作数组。：标签页的唯一标识符（必填）。：标签页显示的名称。

封装element-ui页签：el-tabs

愤怒的阿木木的博客

09-23

1319

el-tabs封装成公共组件，方便拓展。

el-tab设置默认激活的标签页

Sean_0819的博客

09-04

8262

我们先看看官方文档：此时我设置的 activeTab: 'body',那么此时就是默认激活的标签页是 el-tab-pane标签里面的name="body"的标签页，也就是请求体这个标签页。下面上传源代码，让大家自己尝试一下哈。

ElementUI中的el-tab-pane组件使用v-show不生效的问题

前端笔记——放弃很容易,但坚持一定很酷

07-15

3700

在el-tab-pane标签上使用v-show，即使v-show的值为false，el-tab的标签仍然展示。即使将v-show加在slot子节点上，也会显示tab的背景图和close图标；this.$refs.tabs.$children[0].$refs.tabs获取到的值：所有tab页签dom元素的集合。注意观察tab的dom结构，你会发现el-tab-pane会生成一个唯一id，id的值就是tab-加上name属性的值。但是有些场景下不适合使用v-if，比如切换比较频繁，并且需要保留之前的状态等。

【VUE项目实战】44、渲染静态属性和动态参数的Tab

程序猿之洞

04-04

6139

接上篇《43、参数管理模块基本结构搭建》上一篇我们完成添了参数管理模块的基本结构编写，并实现了商品分类的级联选择。本篇我们来渲染静态属性和动态参数的Tab页签。一、实现Tab页签切换这里我们需要用到一个新的ElementUI组件，名为“Tabs标签页”：它的基本用法就是实现不同页签之间的切换。下面是官网针对上图效果的示例代码： <template> <el-tabs v-model="activeName" @tab-click="handleClick"> ..

竖型el-tabs添加滚动条

wusq的博客

12-27

7038

竖型的el-tabs的样子先看看官网的例子：当左边的菜单多了之后就会变成下面这样：上面和下面都多了箭头，要查看后面数据只能点击箭头，不能滚动鼠标向下，操作起来很不方便官网没有关于滚动条的配置，只能自己探索： 1.f12打开控制台，找到左边标签栏对应的代码，具体方法如图： 2.这上面找到的代码修改的效果只是暂时的，将css复制下来，写到项目里面 .el-tabs--l...

el-tabs修改

qq_34179819的博客

08-10

1847

而且el-tabs组件能给到的只有el-tabs和el-tab-pane，直接将:style="{}"动态样式作用在el-tab-pane上又不行。想必也发现了另外一个神奇的事情，原生的el-tabs栏目的宽度是根据字体大小也就是font-size去设置的。此时，在代码中也是根据font-size去设置栏目的宽度，示例中使用4.8去调节，可以修改这个数字去修改栏目的宽度。现有的element的组件库已经能满足大部分项目中的需求，但是当出现一些奇奇怪怪的需求时，我们就需要对element组件进行修改。

Vue中根据不同状态切换 Tabs 标签页内容

明思齐的博客

06-02

8314

可以控制当前激活的标签页（即默认展示出来的页面）。组件用于包含多个标签页，每个标签页由。

element-ui中的el-tab-pane实现显示隐藏的方法

热门推荐

zuo-yiran的博客

02-18

2万+

直接用v-show是不起作用的，经过查找是说v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效，那么要实现显示隐藏的控制可以进行使用如下的方式：方式一：最简单有效的用v-if取代v-show实现。方式二：在el-tabs标签上添加ref，通过js进行控制，具体实现如下：例子： <el-tabs v-model="activeName" @tab-click="handleClick"

el-tabs内容标签el-tab-pane多行显示

爆炸哈斯卡的博客

06-13

5800

想通过el-tabs实现标签页内容多行显示，垂直分布，通过在el-tab-pane中插值三个div，让div垂直显示，然后在修改一下style就可以了

element-ui el-tabs el-tab-pane 的使用

努力搬砖的小码

04-25

2243

【代码】element-ui el-tabs el-tab-pane 的使用。

【Vue】标签页el-tabs常用写法

慕白Lee的博客

03-19

2万+

【代码】Vue页签的常用写法。

ElementUI修改el-tab-pane自定义添加class并修改组件样式

Aotman_的博客

12-21

3990

element官方文档并没有提供插槽，业务上有很多个性化需求，完成需求后记录一下，有需要的小伙伴可以直接复制代码使用。先上效果图：需求是当前用户绑定多个标签，那么默认选中第一个标签，其余所属标签字体颜色标记成黄色。vue解决方案：原生js动态添加class setAttribute。

【el-tabs循环生成el-tab-pane，一行无法完全展示时（内容标签页非常多），实现换行展示。

qq_42177166的博客

07-01

2812

el-tabs循环生成的el-tab-pane非常多的情况下，实现换行展示。

使用el-tab 实现两个tab切换

宣晨光

04-03

748

1、主页面 index.vue。

el-tabs和el-tab-pane的联合使用

xiao18180abc的博客

03-12

460

el-tabs可以理解为导航栏列表，而el-tab-pane则是列表里的每个标签栏，name对应着它的标识，而v-model="activeTab"是对应的绑定值，我这里的默认是第一个功德，所以是这样写。如果想要切换的话，可以点击对应的订单，这时候"activeTab"会切换成order，就自动跳到另外的页签了。el-tabs和el-tab-pane的联合使用。