Vue3+ Naive UI做一个行政区选择器

行政区信息的获取

这里用到的行政区信息是从高德开放平台获取的，地址是：
https://developer.amap.com/api/webservice/guide/api/district
如果信息只需要获取一次的话，其实并不需要注册，直接页面下方的服务示例中查询就可以：

打开开发人员工具，再次点击查询按钮，这时再开发人员工具的“网络”界面中，会看到刚刚发出来一条查询请求：

右键选中这条请求记录，选择“复制响应”，然后打开记事本或者其他编辑器，就可以保存查询结果了。

组件编写

保存成数据对象

打开Vue项目，新建一个TS或JS文件，对刚才的文本字段掐头去尾，保留所有省的信息为一个数组，

组件编写

这里以NaiveUI 为例进行组件制作，当然也可以使用其他模板，但是需要注意性能问题。
数据的提取主要通过Vue计算属性实现，在数据JSON结构中筛选不同层级的数据。
然后通过Vue监听属性，将变量的变化传递出去。

<template>
  <n-space>
    <n-select v-model:value="l1" :options="level1" @update-value="l2='';l3=''"></n-select>
    <n-select v-model:value="l2" :options="level2" @update-value="l3=''"></n-select>
    <n-select v-model:value="l3" :options="level3"></n-select>
  </n-space>
</template>

<script>
import districts from "../assets/data/districts";

export default {
  name: "selectDistrict",
  data() {
    return {
      l1: '',
      l2: '',
      l3: '',
      d: ''
    }
  },
  computed: {
    level1() {
      var dis = []
      for (let i in districts) {
        dis.push({label: districts[i].name, value: i})
      }
      return dis
    },
    level2() {
      if (this.l1 == '')
        return []
      var dis = []
      let ddd = districts[this.l1].districts
      for (let i in ddd) {
        dis.push({label: ddd[i].name, value: i})
      }
      return dis
    },
    level3() {
      if (this.l2 == '')
        return []
      var dis = []
      let ddd = districts[this.l1].districts[this.l2].districts
      for (let i in ddd) {
        dis.push({label: ddd[i].name, value: i})
      }
      return dis
    },
    district() {
      if (this.l1 == '' || this.l2 == '')
        return {}

      let d = districts[this.l1].districts[this.l2]
      if (d.districts.length > 0 && this.l3 != '')
        d = d.districts[this.l3]

      let loc = d.center.split(',')
      //d.lng=loc[0]
      d.lng = parseFloat(loc[0])
      d.lat = parseFloat(loc[1])
      console.log(d)
      this.d = d;
      return d
    }

  },
  watch: {
    district(newvalue, oldvalue) {
      this.$emit("selectedDistrict", newvalue);
    }
  }
}
</script>

<style scoped>
.n-select {
  width: 100px;
}
</style>

组件使用

使用此组件直接在父组件中使用如下代码即可

 <select-district @selectedDistrict="(e)=>{this.district=e}"></select-district>