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

Question

I am using the Element UI component library for Vue 2. Element has a Tabs component as shown in the following screenshot (blue rectangle):

I want to add a button to where the red arrow is pointing. But the Tabs component doesn't have a native way to add an accessory UI component like that, such as by using a slot. Since this area is within the Tabs component, I don't see a way to insert an accessory component in that area.

If you look at the inspector, I basically have to insert a Button component after the div with the class tablist.

Answer 1

You could do this programatically:

1. Style the nav bar in el-tabs to set display:flex and justify-content:space-between:

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

2. Add an el-button to the template, and give it a template ref (named btn).

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

3. Apply a template ref to the el-tabs component (named tabs).

   <el-tabs ref="tabs">
   

4. In the mounted() hook, insert the el-button into el-tabs:

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

demo