Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

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

各位老大,有个问题请教。
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)删除后,只有从后往前顺序删除,不会出错;一旦从前往后,或者从中间某个页面开始删除,会连带把需要删除的页面连同后一页,一起关闭。
上图解释的更清楚些:
tab关闭错误.png
关闭tabpane代码如下:

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

请教各位大佬,这该如何是好?~~~~


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...