iView/View UI tabs可关闭标签，跳跃关闭会关闭后续所有标签问题。

 序言

        在使用iview2.0/View UI设计页面时发现需要使用tabs标签进行切换，但是在标签for循环内添加关闭按钮会给用户一种不是同级的感觉，所以打算采用官网的关闭方法，发现点击中间某个标签关闭会联通中间到结尾所有的标签都关闭的bug。

0.手动添加按钮方法

<Tabs ref="taskBeforeTabsSel" type="card">
  <TabPane v-for="(item, index) in taskBeforeStepData" :key="index" :label="'步骤'+(index+1)">
    <Button type="error" icon=" iconfont icon-trash" @click="delBeforeStep(index)">删除当前步骤</Button>
    <!-- 内容 -->
  </TabPane>
</Tabs>

// 作业前删除步骤
delBeforeStep(index) {
  this.taskBeforeStepData.splice(index, 1)
  if (this.taskBeforeStepData.length === index) {
    this.$refs.taskBeforeTabsSel.activeKey = index-1
    this.$refs.taskBeforeTabsSel.focusedKey = index-1
  }
  this.$forceUpdate() // 强制刷新
},

效果：

        因为添加步骤的内部还有一个3级表单，给人的感觉很容易误解为删除的不是上面的步骤而是下面的3级表单行。

 

1.结合官方代码问题

<Tabs ref="taskBeforeTabsSel" type="card" closable @on-tab-remove="delBeforeStep">
  <TabPane v-for="(item, index) in taskBeforeStepData" :key="index" :label="'步骤'+(index+1)">
    <!-- 内容 -->
  </TabPane>
</Tabs>

        js内容同上不变

效果：

 

        但实际打印参数却发现参数还在！并且还有白屏问题！

 2.寻找解决方案

        在度娘的帮助下在思否的一篇文章给我提供了迷津，机票。

        在结合他文章后大佬给出答案，我做了尝试，发现并没有改观，但是题主却采纳了，经过仔细代码对比，我发现虽然都是在原标签dom节点进行关闭，但是关闭的方法却不一样。

        这里采用的是:before-remove，在官网api确实有该属性，但没有任何案例！坑啊！

        这个方法 + closable + 前面大佬给的return Promise.reject() = 问题解决！

3.最终代码

<Tabs ref="taskBeforeTabsSel" type="card" closable :before-remove="delBeforeStep">
  <TabPane v-for="(item, index) in taskBeforeStepData" :key="index" :label="'步骤'+(index+1)">
    <Button type="error" icon=" iconfont icon-trash" @click="delBeforeStep(index)">删除当前步骤</Button>
    <!-- 内容 -->
  </TabPane>
</Tabs>

// 作业前删除步骤
delBeforeStep(index) {
  this.taskBeforeStepData.splice(index, 1)
  if (this.taskBeforeStepData.length === index) {
    this.$refs.taskBeforeTabsSel.activeKey = index-1
    this.$refs.taskBeforeTabsSel.focusedKey = index-1
  }
  this.$forceUpdate() // 强制刷新
  return Promise.reject()
},

 效果：

 

        不过并不完美~ 因为使用Promise.reject() ，虽然原生iview删除被打断了，但控制台却有个报错提示，有解决方案的欢迎评论区指出~