技術標籤：遍歷children

深度優先遍歷口訣

• 訪問根節點
• 對根節點的children挨個進行深度優先遍歷

<template>
  <div>
    <div>
      <label>省</label>
      <select class="select-item" v-model="province">
        <option v-for="item in allData" :key="item.name" :value="item.name">{{item.name}}</option>
      </select>
      <label>市</label>
      <select class="select-item" v-model="city">
        <option v-for="item in cityData" :key="item.name" :value="item.name">{{item.name}}</option>
      </select>
      <label>區</label>
      <select class="select-item" v-model="area">
        <option v-for="item in areaData" :key="item.name" :value="item.name">{{item.name}}</option>
      </select>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      province: "",
      city: "",
      area: "",
      cityData: [],
      areaData: [],
      allData: [
        {
          name: '廣東省',
          children: [
            {
              name: '深圳市',
              children: [
                {name: '南山區'},
                {name: '福田區'},
                {name: '寶安區'}
              ]
            },
            {
              name: '廣州市',
              children: [
                {name: '天河區'},
                {name: '海珠區'},
                {name: '番禹區'}
              ]
            }
          ]
        },
        {
          name: '浙江省',
          children: [
            { 
              name: '杭州市',
              children: [
                {name: '上城區'},
                {name: '下城區'},
                {name: '西湖區'}
              ]
            },
            {
              name: '寧波市',
              children: [
                {name: '江北區'},
                {name: '北侖區'},
                {name: '鄞州區'}
              ]
            }
          ]
        }
      ]
    };
  },
  watch: {
     province(val) {
        this.cityData = this.getChildData(this.allData, val);
        this.city = this.cityData[0]? this.cityData[0].name : ''
      },
      city(v) {
        this.areaData = this.getChildData(this.allData, v);
        this.area = this.areaData[0]? this.areaData[0].name : ''
      }
  },
  methods: {
    getChildData(tree, cityName) {
        let childData = []
        const dfs = (node) => {
          if (!node) return;
          for (let i = 0; i < node.length; i++) {
            let item = node[i];
            if (item.name === cityName) {
              childData = item.children
            }
            if (item.children) dfs(item.children);
          }
        };
        dfs(tree);
        return childData;
      }
  },
  created() {
    this.province = this.allData[0].name
  }

};
</script>
<style scoped>
.select-item {
  width: 120px;
  margin: 0 20px 0 10px;
}
</style>