elemenet 级联

两种数据格式

注释掉的是一种格式，未注释的是另一种格式。

<template>
    <div>
      <!-- <select v-model="selectedProvince" @change="provinceChanged">
        <option v-for="province in provinces" :value="province.code">{{ province.name }}</option>
      </select> -->
      <select v-model="selectedProvince" @change="provinceChanged">
      <option v-for="province in provinces" :value="province">{{ province }}</option>
    </select>
      <select v-model="selectedCity">
        <option v-for="city in cities" :value="city">{{ city }}</option>
      </select>
    </div>
</template>
   
  <script>
  export default {
    data() {
      return {
        // provinces: [{code:'s001',name:'省份A'}, {code:'s002',name:'省份B'},{code:'s003',name:'省份C'}],
        // citiesMap: {
        //   's001': ['城市A1', '城市A2', '城市A3'],
        //   's002': ['城市B1', '城市B2', '城市B3'],
        //   's003': ['城市C1', '城市C2', '城市C3']
        // },
        provinces: ['省份A', '省份B', '省份C'],
        citiesMap: {
          '省份A': ['城市A1', '城市A2', '城市A3'],
          '省份B': ['城市B1', '城市B2', '城市B3'],
          '省份C': ['城市C1', '城市C2', '城市C3']
        },
        selectedProvince: '',
        selectedCity: ''
      };
    },
    computed: {
      cities() {
        return this.citiesMap[this.selectedProvince] || [];
      }
    },
    methods: {
      provinceChanged() {
        this.selectedCity = this.cities[0] || '';
      }
    },
    mounted() {
      this.provinceChanged(); // 初始化城市列表
    }
  };
  </script>