Как поместить три разных дерева в 3 разные вкладки на одной странице и синхронизировать переключение с каждой вкладкой? vue. js

Question

У меня три вкладки на одной странице, каждая вкладка имеет один древовидный список, переключение с вкладки 1 на вкладку 3, древовидный список синхронизируется с вкладками. При обратном переключении с вкладки 2 на вкладку 1 содержимое внутри вкладки синхронизируется с вкладками, но древовидный список по-прежнему остается вкладкой 2, а переключение с вкладки 3 на вкладку 2 или 1, древовидный список остается на вкладке 3. У меня есть попытался добавить loading: false и finished: false в data () {}, чтобы проверить статус, в то время как add: moment-check = "false" в div class = "treeBox" и поместил this.loading = false; this.finished = false; в метод {} каждого дерева для повторной инициализации, но он вообще не работает. Как сделать, чтобы древовидный список синхронно переключался с вкладками?

data () {
    return {
    loading:false, // loading status
    finished:false, //check the loading finished or not
    look:false,
    af:false,

    treeshowTab1:true,
    treeshowTab2:false,
    treeshowTab3:false,
    //only when treeshowTab1:true,treeshowTab2:false,treeshowTab3:false,can see all the three different trees from each tabs
    
    substionTab1:[],
    showChildrenTab1:[],
    substationListTab1:[],
    substionTab2:[],
    showChildrenTab2:[],
    substationListTab2:[],
    substionTab3:[],
    showChildrenTab3:[],
    substationListTab3:[],
    
    FirstId:"",
    SecondId:"",
    ThirdId:"",
    
    isChangeFirstId:"",
    isChangeSecondId:"",
    isChangeThirdId:"",
    
    }
  }，
    
    
watch:{
    selected(val){
      console.log(val)
      if(val == "tab-container2"){
        
        console.log(this.SecondId)
       
        if(window.localStorage.EGSecondId == this.SecondId){
                 
          this.startInitLoad()
        }else{
          this.startInitLoad("next")
        }
   //the trees can be shown on the navigation head only when all these three trees' attribute is "true"
      this.treeshowTab2 = true   

      }else if(val == "tab-container3"){
         
         console.log(this.ThirdId)

        if(window.localStorage.EGThirdId == this.ThirdId){
         
          
          this.initThree()  
        }else{
          this.initThree("next")
        }
        this.treeshowTab3 = true

      }else if(val == "tab-container1"){

        console.log(this.FirstId)
        
         if(window.localStorage.EGFirstId == this.FirstId){
          this.TableInit()  
        }else{
          this.TableInit("next")
        }
        this.treeshowTab1 = true
      }
    }
  },
 
 
 mounted(){
 Indicator.open("Loading")
    this.$axios({
      method:"GET",
      //Get the tree list from data base
      url:"/api/app/Data/getSubstationTab1"
    }).then((res)=>{

      let arr = res.data
      if(res.data[0].substation.looplist[0].name != undefined || res.data[0].substation.looplist[0].name == null){
          this.headName = res.data[0].substation.looplist[0].name;
      }else  if(res.data[0].substation.substationName != undefined || res.data[0].substation.substationName == null){
          this.headName = res.data[0].substation.substationName;
      }else{
        this.headName = 'Name';
      }
      
      window.localStorage.headName = this.headName
      this.substationListTab1 = arr
      let subArr = this.substationListTab1.map((item)=>{
        return item.substation
      })
      this.substionTab1 = subArr
      this.substionTab1.map((val)=>{
      this.showChildrenTab1.push(false)
      })
    }).catch(()=>{
      Indicator.close()
      console.log("Error")
    })
    
    //2nd tab
    Indicator.open("Loading")
    this.$axios({
      method:"GET",
      
      url:"/api/app/Data/getSubstationTab2"
    }).then((res)=>{
      
      let arr = res.data
      
      
      this.substationListTab2 = arr
      let subArr = this.substationLisTab2.map((item)=>{
        return item.substation
      })
      this.substionTab2 = subArr
      this.substionTab2.map((val)=>{
      this.showChildrenTab2.push(false)
      })
    }).catch(()=>{
      Indicator.close()
      console.log("Error")
    })

    //3rd tab
    Indicator.open("Loading")
    this.$axios({
      method:"GET",
      //Get gas meters
      url:"/api/app/Data/getSubstationTab3"
    }).then((res)=>{
          
            
      let arr = res.data
      this.substationListTab3 = arr
      let subArr = this.substationListTab3.map((item)=>{
        return item.substation
      })
      this.substionTab3 = subArr
      this.substionTab3.map((val)=>{
      this.showChildrenTab3.push(false)
      })
    }).catch(()=>{
      Indicator.close()
      console.log("Error")
    })

  },
 
  methods: {
      
      // tab switching
      showTab: function(tab) {
        this.currentTab = tab;
        //get the data address from database 
        if(arr[0].substation.looplist[0].name != undefined || arr[0].substation.looplist[0].name != null){
        this.headName = arr[0].substation.looplist[0].name;
      }else if(res.data[0].substation.substationName != undefined || res.data[0].substation.substationName != null){
         this.headName = res.data[0].substation.substationName;
      }else{
         this.headName = "Name";
      }
      },
      // Click jump to the both ends of the head
      navPerson(){
        this.$router.push('/person/person');
      },
      navSave(){
        this.$router.push('/alarm/alarm');
      },
      // 1st layer
      zeroClick(){
          look = true
      },
      // 2nd layer
      toggle(index){
        this.showChildrenTab1[index]=!this.showChildrenTab1[index]
        this.showChildrenTab1.push(1)
        this.showChildrenTab2[index]=!this.showChildrenTab2[index]//
        this.showChildrenTab2.push(1)//
        this.showChildrenTab3[index]=!this.showChildrenTab3[index]//
        this.showChildrenTab3.push(1)//
      },
      
      // 3rd layer
        changeTab1(id,name){
        this.isChangeFirstId = id
        this.firstId = id
        console.log(name);
        console.log(id);
        this.ser = id;
        this.Tab1Name = name
        window.localStorage.Tab1Name = name
        this.fixName = name
        this.loading = false; //re-initialization
        this.finished = false;  //re-initialization
           
             
        //1st tab
      this.energyTableInit("next");
    },
      
      //2nd tab
      changeTab2(id,name){
      this.isChangeSecondId = id
      this.SecondId = id
      console.log(id)
      console.log(name)
      this.headName = name
      window.localStorage.Tab2Name = name
      this.fixNameTab2 = name
      this.loading = false; //re-initialization
      this.finished = false;  //re-initialization
               
      
      this.startInitLoad("next")  
    },  

      //3rd tab
      changeTab3(id,name){
      this.isChangeThirdId = id
      this.ThirdId = id
      console.log(id)        
      console.log(name)
      this.headName = name
       window.localStorage.Tab3Name = name
      this.fixNameTab3 = name
      this.loading = false; //re-initialization
      this.finished = false;  //re-initialization

      this.initThree("next")
      
    },

<!-- Tree -->
    <div v-if="treeshowTab1" >
    <div class="treeBox1" @click="look = false" v-if="look" :immediate-check="false"></div>
    <div class="treeBoxO" v-if="look" >
      <div class="treeShow">
        <!-- title default -->
        <div class="arrName" @click="af = !af">
          <img src="../../../../static/img/Path_black@2x.png" alt="" class="picTrue">
          Name
        </div>
        <ul v-for="(item,index) in substionTab1" :key="index" >
          <!-- 2nd Layer -->
          <li @click="toggle(index)" v-if="!af"><img src="../../../../static/img/Path_black@2x.png" alt="" class="picTrue">{{item.substationName}}
          <!-- 3rd Layer -->
          <p @click.stop="change(items.id,items.name),look = false" v-for="(items,indexs) in item.looplist" v-if="showChildrenTab1[index]" :class="items.id == ser ? 'titleClick' : 'titleStyle'">{{items.name}}</p>
          </li>
        </ul>
      </div>
    </div>
    </div>

    
     <div v-if="treeshowTab2">
         <div class="treeBox2" @click="look = false" v-if="look" :immediate-check="false"></div>  
    <div class="treeBoxO" v-if="look">
      <div class="treeShow">
        
        <div class="arrName" @click="af = !af">
          <img src="../../../../static/img/Path_black@2x.png" alt="" class="picTrue">
           Name
        </div>
        <ul v-for="(item,index) in substionTab2" :key="index" >
          
          <li @click="toggle(index)" v-if="!af"><img src="../../../../static/img/Path_black@2x.png" alt="" class="picTrue">{{item.substationName}}
          
            <p @click.stop="changeTab3(items.id,items.name),look = false" v-for="(items,indexs) in item.looplist" v-show="showChildrenTab2[index]" :class="items.id == ser ? 'titleClick' : 'titleStyle'">{{items.name}}</p>
          </li>
        </ul>
      </div>
    </div>
     </div>  
    
    <div v-if="treeshowTab3">
         <div class="treeBox3" @click="look = false" v-if="look" :immediate-check="false"></div>
    <div class="treeBoxO" v-if="look">
      <div class="treeShow">
        
        <div class="arrName" @click="af = !af">
          <img src="../../../../static/img/Path_black@2x.png" alt="" class="picTrue">
          Name
        </div>
        <ul v-for="(item,index) in substionTab3" :key="index" >
          
          <li @click="toggle(index)" v-if="!af"><img src="../../../../static/img/Path_black@2x.png" alt="" class="picTrue">{{item.substationName}}
          
            <p @click.stop="changeTab3(items.id,items.name),look = false" v-for="(items,indexs) in item.looplist" v-show="showChildrenTab3[index]" :class="items.id == ser ? 'titleClick' : 'titleStyle'">{{items.name}}</p>
          </li>
        </ul>
      </div>
    </div>
    </div>