記錄--vue3 setup 中國省市區三級聯動options最簡潔寫法，無需任何庫

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

在寫頁面的時候，發現表單裡面有一個省市區的 options 組件要寫，因為表單很多地方都會用到這個地址選擇，我便以為很簡單嘛。

雖然很簡單的一個功能，但是網路上能搜索到的教程大多都是需要配合 elementUI 等各種 UI 庫的，但是我的項目並沒有使用這些 UI 庫，何況我只是想要拿到 一個地址字元串 而已，何必綁定 UI 庫呢？

1、地址三級聯動製作思路

思路其實很簡單：

1、一個地圖 json 數據

2、能夠拿到 省份、市、區 的 options 數組來綁定就可以了

3、選擇一個省份市，對應的市要變化；選擇市時，對應的區要變化

這樣的話，我們完全可以依賴 vue 強大的數據處理機制來解決

2、地圖json

地圖json數據我隨便搜了一個： 中國省市區數據

3、vue setup 語法糖寫法

我們點擊上面的鏈接，下載了地圖json數據，這裡選擇一個普通的就可以了，如圖：

 將文件命名為 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]
})

這裡同樣預設選中第一個，當市變化時，區也會切換到對應的市區數據

4、效果

完美！

這樣，就可以不藉助任何第三方UI庫，直接使用 vue 的計算屬性和監聽簡單解決地圖三級聯動問題，就是數據的處理而已

以下是完整的代碼：

其中 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('')

本文轉載於:

https://juejin.cn/post/7297983578548355099

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。