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

Question

我正在使用 Element UI component library for Vue 2. Element has a Tabs 组件，如下面的屏幕截图（蓝色矩形）所示：

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

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

Answer 1

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

设置 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

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

Add a button to the right side of Element UI's Tabs component

javascript

vue.js

vue-component

element-ui