VUE-Element组件（六）Tabs 标签

矫情吗；* 2022-12-10 02:25 362阅读 0赞

一、标签自定义：

1、在标签后面增加按钮

<el-tabs v-model="editableTabsValue" type="card" 
    	@tab-remove="removeTab" 
    	:before-leave="beforeLeave"
    	class="my-tab-pane"
    	>
    	<el-tab-pane
    		v-for="(item, index) in editableTabs"
    		:key="item.name"
    		:label="item.title"
    		:name="item.name"
    		closable
    	>
    	</el-tab-pane>
    	<el-tab-pane key="add" name="add" >
    		<span slot="label" style="padding: 8px;font-size:20px;font-weight:bold;">
    			+
    		</span>
    	</el-tab-pane>
    </el-tabs>

自定义标签，标签整体仍然可以点击，但是不希望触发点击，可以加上disabled

<el-tabs type="card" v-model="activeName" @tab-click="handleClick" class="container">
          <el-tab-pane label="已回执" name="yes">
            <FeedBackTable :searchData="searchData"></FeedBackTable>
          </el-tab-pane>
          <el-tab-pane label="未回执" name="no"><NoFeedBackTable :searchData="searchData"></NoFeedBackTable> </el-tab-pane>
          <el-tab-pane key="add" name="add" v-if="activeName === 'yes'" disabled>
            <span slot="label">
              <a @click="searchReceiptContent" href="javascript:void(0);"><i class="el-icon-search"></i></a>
              <span v-if="isReceiptContentShow"
                ><span class="receipt-content" :title="receiptContent">{
       { receiptContent }}</span>
                <a href="javascript:void(0);" @click="hideReceiptContent()" class="delete-icon">X</a>
              </span>
            </span>
          </el-tab-pane>
        </el-tabs>

2、

二、样式：

1、修改选中项的样式：

f12可以看到，选中后，class多了一个is\_active：

![20200923142326586.png][]

所以给is-active加样式即可：

/deep/ .el-tabs__item.is-active {
          color: #ffffff;
          background-color: #538dd5;
        }

[20200923142326586.png]: /images/20221123/4720878c570d4499a9b38d69fd4c2f7a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，362人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue Tab 组件再探究

初学 Vue 的时候，发现用 Vue 来写 Tab 组件是如此简单，利用“数据驱动”的思路还真和 js 控制 dom 不一样。请见下面第一版的代码，没有 js dom 那样 f

女爷i/ 2023年07月16日 09:56/ 0 赞/ 31 阅读

相关 CSS组件的样式绑定 + tab标签切换内容

CSS组件的样式绑定 + tab标签切换内容效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

朱雀/ 2023年05月29日 02:36/ 0 赞/ 223 阅读

相关 Vue组件通信 (六)

目录 1. 父向子组件通信 1.1 props 1.2 ref 1.3 children 2. 子向父组件通信

- 日理万妓/ 2022年12月13日 01:37/ 0 赞/ 269 阅读

相关 VUE-Element组件（六）Tabs 标签

一、标签自定义： 1、在标签后面增加按钮 <el-tabs v-model="editableTabsValue" type="card" @tab-r

矫情吗；*/ 2022年12月10日 02:25/ 0 赞/ 363 阅读

相关自己编写vue tabs组件编写

想自己编写标签页组件，点击标签切换显示对应的内容，使用方式如下 <mytabs> <mytab-pane label="Notice">

傷城~/ 2022年09月05日 12:37/ 0 赞/ 235 阅读

相关 react-native动态tab组件

在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换. 这些组件分成下面两种. ![20180706030826957.png][] ![201

太过爱你忘了你带给我的痛/ 2022年05月21日 11:42/ 0 赞/ 224 阅读

相关 LayaAir UI组件 # Tab 选项卡按钮组

目录 Tab 组件编码示例默认资源自定义资源 -------------------- Tab 组件 Tab 组件用于定义选项卡按钮组，例如多页面切换显

短命女/ 2022年04月01日 06:53/ 0 赞/ 400 阅读

相关原生JS制作简易Tabs组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

深碍√TFBOYSˉ_/ 2022年02月25日 01:30/ 0 赞/ 236 阅读

相关 Tab标签

实现类似IE7的Tab标签风格.效果如下: ![untitled.JPG][] ![ContractedBlock.gif][] ![ExpandedBl

谁借莪１个温暖的怀抱￠/ 2021年12月11日 19:47/ 0 赞/ 312 阅读

相关 Android Tab：面板标签控件

在有限的手机屏幕空间内，当要浏览的内容较多，无法在一个屏幕空间内全部显示时，可以使用滚动视图来延长屏幕的空间。当浏览的内容具有很强的类别性质时，更合适的方法是将不同

迷南。/ 2021年12月09日 23:23/ 0 赞/ 451 阅读