vue3中国省市区三级联动options简洁写法（无依赖）

1、地址三级联动制作思路

思路：

1、一个地图 json 数据

2、能够拿到 省份、市、区 的 options 数组来绑定就可以了

3、选择一个省份市，对应的市要变化；选择市时，对应的区要变化

这样的话，我们完全可以依赖 vue 强大的数据处理机制来解决

2、地图json

中国省市区数据

3、vue setup 语法糖写法

将文件命名为 area.json ，然后在项目中引入：

// 详细地址(省市区 详细地址)
import areaObj from '../../public/area.json';

第一步：首先是处理省份options数组（这里json地图是键名为省份）：

// 省
const provinceArr = Object.keys(areaObj)
const province = ref(provinceArr[0])

这样就拿到了一个省份数组，这里随机默认选中第一个，北京市，这里 province 变量用来绑定输入框的值

第二步：处理市的数据，关键就是使用计算属性来监听 省份的变化，省份一改变，市的数据也会跟着改变：

// 市
const cityArr = computed(() => {
    return Object.keys(areaObj[province.value])
})
const city = ref(cityArr.value[0])

// 监听省份变化
watch(province, (newVal) => {
    city.value = Object.keys(areaObj[newVal])[0];
});

同样，这里的市默认选中第一个，city 也是双向绑定到 输入框， 为了能够在页面随时响应式改变，添加了一个watch 监听

第三步：处理区的数据

// 区
const areaArr = computed(() => {
    return areaObj[province.value][city.value]
})
const area = ref(areaArr.value[0])
// 监听市变化
watch(city, (newVal) => {
    area.value = areaObj[province.value][newVal][0]
})

这里同样默认选中第一个，当市变化时，区也会切换到对应的市区数据

完整的代码

其中 provinceArr、cityArr、areaArr 绑定options选项，province、city、area 绑定input 输入框

import { ref, computed, watch } from 'vue';
// 详细地址(省市区 详细地址)
import areaObj from '../../../../public/area.json';

// 省
const provinceArr = Object.keys(areaObj)
const province = ref(provinceArr[6])
// 市
const cityArr = computed(() => {
    return Object.keys(areaObj[province.value])
})
const city = ref(cityArr.value[0])
// 监听省份变化
watch(province, (newVal) => {
    city.value = Object.keys(areaObj[newVal])[0];
});
// 区
const areaArr = computed(() => {
    return areaObj[province.value][city.value]
})
const area = ref(areaArr.value[0])
// 监听市变化
watch(city, (newVal) => {
    area.value = areaObj[province.value][newVal][0]
})

// 详细地址
const detailArea = ref('')