VUE-Element组件（六）Tabs 标签

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

一、标签自定义：

1、在标签后面增加按钮

  1. <el-tabs v-model="editableTabsValue" type="card" 
  2.     @tab-remove="removeTab" 
  3.     :before-leave="beforeLeave"
  4.     class="my-tab-pane"
  5.     >
  6.     <el-tab-pane
  7.         v-for="(item, index) in editableTabs"
  8.         :key="item.name"
  9.         :label="item.title"
  10.         :name="item.name"
  11.         closable
  12.     >
  13.     </el-tab-pane>
  14.     <el-tab-pane key="add" name="add" >
  15.         <span slot="label" style="padding: 8px;font-size:20px;font-weight:bold;">
  16.             +
  17.         </span>
  18.     </el-tab-pane>
  19. </el-tabs>

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

  1. <el-tabs type="card" v-model="activeName" @tab-click="handleClick" class="container">
  2.       <el-tab-pane label="已回执" name="yes">
  3.         <FeedBackTable :searchData="searchData"></FeedBackTable>
  4.       </el-tab-pane>
  5.       <el-tab-pane label="未回执" name="no"><NoFeedBackTable :searchData="searchData"></NoFeedBackTable> </el-tab-pane>
  6.       <el-tab-pane key="add" name="add" v-if="activeName === 'yes'" disabled>
  7.         <span slot="label">
  8.           <a @click="searchReceiptContent" href="javascript:void(0);"><i class="el-icon-search"></i></a>
  9.           <span v-if="isReceiptContentShow"
  10.             ><span class="receipt-content" :title="receiptContent">{
  11.    { receiptContent }}</span>
  12.             <a href="javascript:void(0);" @click="hideReceiptContent()" class="delete-icon">X</a>
  13.           </span>
  14.         </span>
  15.       </el-tab-pane>
  16.     </el-tabs>

2、

二、样式：

1、修改选中项的样式：

f12可以看到，选中后，class多了一个is_active：

20200923142326586.png

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

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

发表评论

表情：
评论列表 （有 0 条评论，394人围观）

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

相关阅读

    相关 Vue Tab 组件再探究

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

    女爷i女爷i/ 0 赞/ 62 阅读

    相关 Android Tab：面板标签控件

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

    迷南。迷南。/ 0 赞/ 464 阅读