Element-ui Tabs标签页组件 右侧自定义按钮

效果：

实现：

<el-tabs v-model="activeName" @tab-click="tabClick">
  <el-tab-pane label="标签1" name="first"></el-tab-pane>
  <el-tab-pane label="标签2" name="second"></el-tab-pane>
  <el-tab-pane disabled>
    <slot slot="label">
        <el-button @click.stop="submit">提交</el-button>
        <el-button @click.stop>返回</el-button>
    </slot>
  </el-tab-pane>
</el-tabs>

<script>
data(){
  return {
    activeName: "first"
  }
},
methods: {
  tabClick(tab){
    this.activeName = tab.name
  }
}
</script>
<style lang="less" scoped>
/deep/.el-tabs__nav{
  width: 100%;
}
/deep/.el-tabs__item.is-top:last-child {
  float: right;
}
</style>

关键点：

1. disabled 属性可以防止切换到空白标签页
2. .stop 修饰符禁止 click 事件冒泡