1 个回答

大致实现

<select v-model="selectedAddress">
  <option value="">请选择省份</option>
  <option v-for="(province, index) in provinces" :key="index" :value="province.name">{{ province.name }}</option>
</select>
export default {
  data() {
    return {
      selectedAddress: { province:'', city: '', district: ''},
      // 省、市、区列表
      provinces: [{name: '北京'}, {name: '上海'}], //...
      cities: [], //...
      districts: [] //...
    }
  },
  watch: {
    // selectedAddress的watcher,用来更新市和区的列表
    'selectedAddress.province'(newValue) {
      this.cities = this.getCityList(newValue)
      this.districts = []
    },
    'selectedAddress.city'(newValue) {
      this.districts = this.getDistrictList(this.selectedAddress.province, newValue)
    }
  },
  methods: {
    // 根据省份获取市的列表
    getCityList(provinceName) {
      // TODO: 根据省份名称获取城市列表
    },
    // 根据省份和城市获取区县的列表
    getDistrictList(provinceName, cityName) {
      // TODO: 根据省份和城市名称获取区县列表
    }
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题