在 Element UI 的 Tabs 组件的右侧添加一个按钮

问题描述

我正在使用 Vue 2 的 Element UI 组件库。Element 有一个 Tabs 组件，如下面的屏幕截图（蓝色矩形）所示：

我想在红色箭头所指的位置添加一个按钮。但是 Tabs 组件没有像这样添加辅助 UI 组件的本机方式，例如使用插槽。由于该区域在 Tabs 组件内，所以我看不到在该区域插入附件组件的方法。

如果您查看检查器，我基本上必须在类 div 的 tablist 之后插入一个 Button 组件。

解决方法

您可以以编程方式执行此操作：

在 el-tabs 中设置导航栏样式以设置 display:flex 和 justify-content:space-between：
```
.el-tabs__nav-scroll {
  display: flex;
  justify-content: space-between;
}
```
向模板添加一个 el-button，并为其提供一个模板引用（名为 btn）。
```
<el-button ref="btn">Click me!</el-button>
```
将模板引用应用于 el-tabs 组件（名为 tabs）。
```
<el-tabs ref="tabs">
```

在 mounted() 钩子中，将 el-button 插入到 el-tabs 中：

export default {
  mounted() {
    const scrollBar = this.$refs.tabs.$el.querySelector('.el-tabs__nav-scroll')
    scrollBar.appendChild(this.$refs.btn.$el)
  }
}

demo

javascript vue-component vue.js