el-tabs的上方目录栏增加自定义按钮

需求如图:需要在el-tabs的最右侧加一个自定义按钮,它不属于el-tab-pane,而且要在最右侧。这时候就要使用定位来完成这个按钮的显示。
在这里插入图片描述
代码结构如下:自定义按钮要与el-tabs的层级并列,然后通过css设置custom-btn的定位样式
在这里插入图片描述

.tabs-wrapper {
  position: relative;
}
.custom-btn {
  position: absolute;
  top: 6px;
  right: 20px;
}

其实是custom-btn距离它外层包裹的div内部上方6px,然后刚好就显示在el-tabs上,是视觉效果,并不是直接在el-tabs内部放自定义按钮。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 Element UI 的 el-tabs 组件时,如果需要在选项卡右边添加自定义按钮,可以通过自定义样式及插槽来实现。 首先,我们可以为选项卡容器(el-tabs添加一个自定义样式类,例如"custom-tabs",然后在样式中设置该类的 position 为 relative,以便在选项卡右侧定位自定义按钮。 接下来,在 el-tabs 组件内部,我们可以使用插槽来自定义选项卡标签的内容。使用名为"label"的插槽,可以将自定义的标签内容插入到选项卡中。 为了实现在选项卡右侧添加按钮,我们可以在该插槽内部,通过 CSS 绝对定位的方式将按钮添加到选项卡右侧。我们可以使用一个额外的 div 元素来包裹按钮,并设置该元素的 position 为 absolute,然后设置其 right 值为 0,将按钮定位到选项卡右侧。 以下是一个示例代码: ``` <template> <el-tabs class="custom-tabs"> <el-tab-pane label="标签一"> 内容一 </el-tab-pane> <el-tab-pane label="标签二"> 内容二 </el-tab-pane> <template slot="label"> <span>标签三</span> <div class="custom-button"> <el-button type="primary">自定义按钮</el-button> </div> </template> </el-tabs> </template> ``` ```css .custom-tabs { position: relative; } .custom-button { position: absolute; right: 0; top: 0; } ``` 通过以上方式,我们就可以在 el-tabs 组件的选项卡右侧添加自定义按钮了。根据实际需求,可以对按钮进行样式调整、添加点击事件等操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值