javascriptvue.jsvue-componentelement-ui

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


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

enter image description here

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.


Solution

  • 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