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

【问题标题】：Add a button to the right side of Element UI's Tabs component在 Element UI Tabs 组件的右侧添加一个按钮
【发布时间】：2021-09-02 14:02:12
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript vue.js vue-component element-ui

【解决方案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

【讨论】：