话不多说先上效果图,实现的功能就是想京东的添加地址一样的联动
首页页面的效果,我用作的是element.ui 实现头部tab数据结构是这样的
<mt-popup v-model="opentc" position="bottom" style="height:300px;">
<el-tabs v-model="editableTabsValue" style="text-align: left; padding-left: 10px;">
<!-- <el-tabs v-model="editableTabsValue" closable @tab-remove="removeTab" style="text-align: left; padding-left: 10px;"> -->
<el-tab-pane
v-for="(ele, index) in editableTabs"
:key="index"
:label="ele.title"
:name="ele.name"
>
<div v-for="(item,index) in ele.content" :key="index">
<div @click="addTab(item,ele)">{{item.HTFLMC}}</div>
</div>
</el-tab-pane>
</el-tabs>
</mt-popup>
在data中定义初始值
editableTabsValue: "1",
editableTabs: [],
tabIndex: 2,
nameindex: 0
watch: {
editableTabsValue() {
console.log(this.editableTabsValue, "||||||||||||| ");
if (this.editableTabsValue < this.nameindex) {
console.log("清空");
this.removeTab(
this.editableTabsValue,
this.nameindex - this.editableTabsValue
);
} else {
this.nameindex = this.editableTabsValue;
console.log("不不不");
}
}
},
//添加
addTab(val, ele) {
console.log(val, ele,"val, ele")
this.editableTabs.forEach(item=>{
if(item.name==this.editableTabsValue){
item.title=val.HTFLMC
}
})
let newTabName = this.tabIndex++ + "";
this.editableTabs.push({
title:'请选择',
name: newTabName,
content: val.children
});
this.editableTabsValue = newTabName;
this.form.FID = val.ID;
this.form.HTLXMC=val.HTFLMC
this.newTabNam = "1";
console.log( this.form.FID," this.form.FID")
},
//删除
removeTab(targetName, nums) {
console.log(
targetName,
nums,
Number(targetName) + 1,
Number(targetName) + Number(nums),
"targetName"
);
for (
var i = Number(targetName) + 1;
i <= Number(targetName) + Number(nums);
i++
) {
console.log(i, "i");
let iii=i.toString()
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === iii) {
tabs.forEach((tab, index) => {
if (tab.name === iii) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.name !== iii);
}
}