Vue.js實現聯動

話不多說先上效果圖，實現的功能就是想京東的添加地址一樣的聯動

首頁頁面的效果，我用作的是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);
      }
    }