el-tab组件设置添加按钮

版权声明：随便转吧，反正我也是转的 https://blog.csdn.net/qq_34122822/article/details/82798193

element的el-tab默认添加按钮不能满足需求，所以自己通过el-tab-pane模拟了一个添加按钮。先上效果图：

最后的添加按钮实际上是一个el-tab-pane，但是却实现了添加的效果，在渲染el-tab时就需要添加

 <el-tabs v-if="currentShopId == shopId" type="card" style="margin-top:20px" v-model="activeIndex" :before-leave="beforeLeave">
     <el-tab-pane v-for="module in modules" :key="module.id" >
       <span slot="label" style="padding: 8px">
         <el-input v-model="module.moduleName" size="mini" style="width: 100px"/>
         <span @click="edit(module)"><i class="el-icon-edit"></i></span>
       </span>
        <!-- 在tab中显示的自定义组件-->
       <module-banner :moduleId="module.id" :shopId="shopId"> </module-banner>

     </el-tab-pane>
     
     <el-tab-pane key="addButton">
       <span slot="label" style="padding: 8px">
         +
       </span>
     </el-tab-pane>
</el-tabs>

因为el-tab中click没有效果，所以采用了before-leave来控制

beforeLeave(activeIndex,oldActiveIndex) {
        if (activeIndex == this.modules.length && this.modules.length > 0) {
          this.edit(null)
          return false
        }
      }

before-leave 是切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。