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

Question

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

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

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

标签： javascriptvue.jsvue-componentelement-ui

Answer 1

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

1. 设置导航栏的样式el-tabs以设置display:flex和justify-content:space-between：

   .el-tabs__nav-scroll {
     display: flex;
     justify-content: space-between;
   }
   

2. 向模板添加一个el-button，并给它一个模板引用（名为btn）。

   <el-button ref="btn">Click me!</el-button>
   

3. 将模板引用应用于el-tabs组件（名为tabs）。

   <el-tabs ref="tabs">
   

4. 在mounted()钩子中，插入el-buttoninto el-tabs：

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

演示