iview tabs循环出的tabPane页面关闭错乱

Question

各位老大，有个问题请教。
iview框架中，Tabs组件内，第一个tabPane页面固定，其他tabPane由第一个tabPane页面中的Button动态渲染。

    <Tabs type="card" name="tab_home" :value="pids" :before-remove="tabclose" :animated="false">
      <TabPane label="固定页面" tab="tab_home" name="tab_home">
        `<!-- 很多个按钮 -->`
        <Button @click="openWorkPro(pid1,name1)">添加页面</Button>
        <Button @click="openWorkPro(pid2,name2)">添加页面</Button>
        <Button @click="openWorkPro(pid3,name3)">添加页面</Button>
      </TabPane>
      <TabPane
          :label="item.name"
          :name="item.pids"
          v-for="(item, index) in protabList"
          :key="`protab_${index}`"
          tab="tab_home"
          :index="index + 1"
          closable
      >
      </TabPane>
    </Tabs>

定义个空数组承载循环数据

data () {
    return {
      pids:'',
      protabList: [],
        }
      }

点击第一个tabpane页面按钮时，在protabList中添加对象：

    // 点击添加按钮事件
    openWorkPro (pid, name) {
      this.pids = ''
      this.pids = pid
      if (this.protabList.length === 0) {
        let item = {
          name: name,
          pids: pid
        }
        this.protabList.push(item)
      } else {
        let hastab = this.protabList.findIndex(item => item.pids === pid)
        if (hastab === -1) {
          let item = {
            name: name,
            pids: pid
          }
          this.protabList.push(item)
        }
      }
    },

以上验证都很成功。
现在的问题是，当关闭某个tabPane页面时（无论是使用:before-remove方法，还是@on-tab-remove方法），将protabList中对应的对象用splice(index,1)删除后，只有从后往前顺序删除，不会出错；一旦从前往后，或者从中间某个页面开始删除，会连带把需要删除的页面连同后一页，一起关闭。
上图解释的更清楚些：

关闭tabpane代码如下：

 tabclose (e) {
      console.log(e)
      this.protabList.splice(e - 1, 1)
      this.pids = 'tab_home'
      console.log(this.protabList)
    },

请教各位大佬，这该如何是好？~~~~

Answer 1

你的splice操作带来的更新node和组件本身删除操作带来的更新node发生了冲突，导致错删，你可以在before-remove中取消组件本身的删除操作

tabclose(index){
    this.protabList.splice(index - 1, 1)
    return Promise.reject()
}