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,则阻止切换。