各位老大,有个问题请教。
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)
},
请教各位大佬,这该如何是好?~~~~
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…