[Vuejs]-Add a button to the right side of Element UI's Tabs component

by

3👍

✅

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

👤tony19

0👍

I used the slot, the create button is obtained on the left.

<el-tabs>
    <el-tab-pane
      name="ExTab"
      ref="ExTab"
    >
    ExTab
    </el-tab-pane>
    <el-tab-pane
      name="add"
      ref="add"
    >
          <span slot="label" >
            <el-button
              slot="reference"
              type="primary"
              round
              icon="el-icon-plus"
              style="margin: 0 1% 0 1% "
              @click.stop="addTab()"
            />
        </span>
    </el-tab-pane>
  </el-tabs>
👤Sergey Jelezniakov

Leave a comment