element-ui tabs组件能否实现“额外按钮”功能

Question

嗨各位，我最近在自己搭建一个前后端分离的博客系统，技术栈是Springboot + Vue。
由于我主要是学习Java的，Vue方面没有太多的研究，在编写前端代码时使用的是Vue-cli3和element-ui进行开发。
在实现一个需要tabs标签页的页面时，我有一个需求是在标签选项卡的同一行最右侧添加一个按钮
我发现element-ui的tabs组件没有办法直接添加这个按钮，而ant design中的tabs组件实现了我想要的效果

ant design效果：

element-ui效果：

由于我项目中已经大量使用了element-ui的组件，我不想因为一个tabs组件就切换到ant design，因此我希望找到一个方法，能够在element-ui下实现这个效果。

非常感谢！

Answer 1

定位一下就行，多大的事

<div style='position: relative;'>
    <el-tabs v-model="activeName" @tab-click="handleClick" style='width:100%'>
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
    <el-button size='mini' style='position: absolute;right:10px;top:5px;'>添加</el-button>
</div>

Answer 2

你可以自己修改css样式
.el-tabs__nav {width:100%}
.el-tabs__item{float:left}
item原来是display:inline-block 可以换成浮动 然后最后一个float：right