【Vue3+Vite+TS】4.0 組件三：省市區(qū)選擇組件

必備UI組件

省市區(qū)選擇組件將用到以下幾個組件：
Select 選擇器

組件設(shè)計

修改src\router\index.ts

/*
 * @Author: bobokaka
 * @Date: 2021-12-19 11:26:38
 * @LastEditTime: 2021-12-21 19:49:02
 * @LastEditors: bobokaka
 * @Description: 路由
 * @FilePath: \vue3-element-ui-baseline\src\router\index.ts
 */
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

import Home from '../views/Home/index.vue'
import Container from '../components/baseline/container/src/index.vue'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        component: Container,
        children: [
            {
                path: '/',
                component: Home,
            },
            {
                path: '/chooseIcon',
                component: () => import('../views/chooseIcon/index.vue'),
            },
            {
                path: '/chooseArea',
                component: () => import('../views/chooseArea/index.vue'),
            },
        ],
    },
]

const router = createRouter({
    routes,
    history: createWebHistory(),
})
export default router

新建src\views\chooseArea\index.vue

<template>
  <div><choose-area/></div>
</template>
<script  lang='ts' setup>
import ChooseArea from '../../components/baseline/chooseArea/src/index.vue'

</script >
<style lang='scss' scoped>

</style>

為了拿到省市區(qū)的數(shù)據(jù)，進入github。
https://github.com/modood/Administrative-divisions-of-China

image.png

image.png

直接下載即可。


image.png

將該項目下\Administrative-divisions-of-China-master\dist\pca-code.json復制到項目src\components\baseline\chooseArea\lib\pca-code.json下。
可以看到其中數(shù)據(jù)結(jié)構(gòu)如下：


image.png

完善src\components\baseline\chooseArea\src\index.vue 
<!--
 * @Author: bobokaka
 * @Date: 2021-12-21 19:47:23
 * @LastEditTime: 2021-12-21 23:15:27
 * @LastEditors: Please set LastEditors
 * @Description: 省市區(qū)選擇組件
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseArea\src\index.vue
-->
<template>
    <div>
        <el-select
            v-model="province"
            placeholder="請選擇省份"
            style="margin: 0 0.1rem"
        >
            <el-option
                v-for="item in allAreasList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
        <el-select
            v-model="city"
            :disabled="!province"
            placeholder="請選擇城市"
            style="margin: 0 0.1rem"
        >
            <el-option
                v-for="item in selectCityList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
        <el-select
            v-model="area"
            :disabled="!province || !city"
            placeholder="請選擇區(qū)域"
            style="margin: 0 0.1rem"
        >
            <el-option
                v-for="item in selectAreaList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import allAreas from '../lib/pca-code.json'
//所有數(shù)據(jù)
const allAreasList = ref(allAreas)
//下拉框選擇省份的值
const province = ref<string>('')
//下拉框選擇城市的值
const city = ref<string>('')
//下拉框選擇區(qū)域的值
const area = ref<string>('')

//城市下拉框內(nèi)容所有值
const selectCityList = computed(() => {
    if (!province.value) return []
    else {
        let cities = allAreasList.value.find(
            item => item.code === province.value
        )!.children
        return cities
    }
})

//區(qū)域下拉框內(nèi)容所有值
const selectAreaList = computed(() => {
    if (!city.value) return []
    else {
        let areas = selectCityList.value.find(
            item => item.code === city.value
        )!.children
        return areas
    }
})
</script>
<style lang="scss" scoped></style>
image.png

但是這里會報錯，computed不能去修改只讀的屬性。


image.png

優(yōu)化，通過watch進行處理：

<script lang="ts" setup>
import { ref, watch } from 'vue'
import allAreas from '../lib/pca-code.json'
//創(chuàng)建一個類型接口
interface TypeAreas {
    code: string
    name: string
    children?: Array<TypeAreas>
}
//所有數(shù)據(jù)
const allAreasList = ref(allAreas)
//下拉框選擇省份的值
const province = ref<string>('')
//下拉框選擇城市的值
const city = ref<string>('')
//下拉框選擇區(qū)域的值
const area = ref<string>('')

//城市下拉框內(nèi)容所有值
const selectCityList = ref<TypeAreas[]>([])

//區(qū)域下拉框內(nèi)容所有值
const selectAreaList = ref<TypeAreas[]>([])
watch(
    () => province.value,
    val => {
        if (val) {
            let cities = allAreasList.value.find(
                item => item.code === province.value
            )!.children

            selectCityList.value = cities
        }
    }
)
watch(
    () => city.value,
    val => {
        if (val) {
            let areas = selectCityList.value.find(
                item => item.code === city.value
            )!.children
            selectAreaList.value = areas!
        }
    }
)
</script>

以上代碼解決了報錯，進一步優(yōu)化：

<!--
 * @Author: bobokaka
 * @Date: 2021-12-21 19:47:23
 * @LastEditTime: 2021-12-21 23:46:28
 * @LastEditors: Please set LastEditors
 * @Description: 省市區(qū)選擇組件
 * @FilePath: \vue3-element-ui-baseline\src\components\baseline\chooseArea\src\index.vue
-->
<template>
    <div>
        <el-select
            clearable
            v-model="province"
            placeholder="請選擇省份"
            style="margin: 0 0.1rem"
        >
            <el-option
                v-for="item in allAreasList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
        <el-select
            clearable
            v-model="city"
            :disabled="!province"
            placeholder="請選擇城市"
            style="margin: 0 0.1rem"
        >
            <el-option
                v-for="item in selectCityList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
        <el-select
            clearable
            v-model="area"
            :disabled="!province || !city"
            placeholder="請選擇區(qū)域"
            style="margin: 0 0.1rem"
        >
            <el-option
                v-for="item in selectAreaList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import allAreas from '../lib/pca-code.json'
//創(chuàng)建一個類型接口
interface TypeAreas {
    code: string
    name: string
    children?: Array<TypeAreas>
}
//所有數(shù)據(jù)
const allAreasList = ref(allAreas)
//下拉框選擇省份的值
const province = ref<string>('')
//下拉框選擇城市的值
const city = ref<string>('')
//下拉框選擇區(qū)域的值
const area = ref<string>('')

//城市下拉框內(nèi)容所有值
const selectCityList = ref<TypeAreas[]>([])

//區(qū)域下拉框內(nèi)容所有值
const selectAreaList = ref<TypeAreas[]>([])
//監(jiān)聽選擇省份
watch(
    () => province.value,
    val => {
        if (val) {
            let cities = allAreasList.value.find(
                item => item.code === province.value
            )!.children

            selectCityList.value = cities
        }

        city.value = ''
        area.value = ''
    }
)

//監(jiān)聽選擇城市
watch(
    () => city.value,
    val => {
        if (val) {
            let areas = selectCityList.value.find(
                item => item.code === city.value
            )!.children
            selectAreaList.value = areas!
        }
        area.value = ''
    }
)
</script>
<style lang="scss" scoped></style>
image.png

進一步完善：

<template>
    <div>
        <el-select
            clearable
            v-model="province"
            placeholder="請選擇省份"
            style="margin: 0 0.1rem"
        >
            <el-option
                v-for="item in allAreasList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
        <el-select
            clearable
            v-model="city"
            :disabled="!province"
            placeholder="請選擇城市"
            style="margin: 0 0.1rem"
        >
            <el-option
                v-for="item in selectCityList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
        <el-select
            clearable
            v-model="area"
            :disabled="!province || !city"
            placeholder="請選擇區(qū)域"
            style="margin: 0 0.1rem"
        >
            <el-option
                v-for="item in selectAreaList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
            ></el-option>
        </el-select>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import allAreas from '../lib/pca-code.json'
//創(chuàng)建一個類型接口
export interface TypeAreas {
    code: string
    name: string
    children?: Array<TypeAreas>
}

export interface TypeArea {
    code: string
    name: string
}
//所有數(shù)據(jù)
const allAreasList = ref(allAreas)
//下拉框選擇省份的值
const province = ref<string>('')
//下拉框選擇城市的值
const city = ref<string>('')
//下拉框選擇區(qū)域的值
const area = ref<string>('')

//城市下拉框內(nèi)容所有值
const selectCityList = ref<TypeAreas[]>([])

//區(qū)域下拉框內(nèi)容所有值
const selectAreaList = ref<TypeAreas[]>([])

//分發(fā)事件給父組件
const emits = defineEmits('change')

//監(jiān)聽選擇省份
watch(
    () => province.value,
    val => {
        if (val) {
            let cities = allAreasList.value.find(
                item => item.code === province.value
            )!.children

            selectCityList.value = cities
        }

        city.value = ''
        area.value = ''
    }
)

//監(jiān)聽選擇城市
watch(
    () => city.value,
    val => {
        if (val) {
            let areas = selectCityList.value.find(
                item => item.code === city.value
            )!.children!
            selectAreaList.value = areas
        }
        area.value = ''
    }
)
//監(jiān)聽選擇區(qū)域
watch(
    () => area.value,
    val => {
        if (val) {
            //下拉框選擇省份的值
            let provinceData: TypeArea = {
                code: province.value,
                name:
                    province.value &&
                    allAreasList.value.find(
                        item => item.code === province.value
                    )!.name,
            }
            //下拉框選擇城市的值
            let cityData: TypeArea = {
                code: city.value,
                name:
                    city.value &&
                    selectCityList.value.find(item => item.code === city.value)!
                        .name,
            }
            //下拉框選擇區(qū)域的值
            let areaData: TypeArea = {
                code: val,
                name:
                    val &&
                    selectAreaList.value.find(item => item.code === val)!.name,
            }
            // console.log(provinceData, cityData, areaData)
            emits('change', {
                province: provinceData,
                city: cityData,
                area: areaData,
            })
        }
    }
)
</script>
<style lang="scss" scoped></style>

修改src\views\chooseArea\index.vue

<template>
    <div><choose-area @change="changeArea" /></div>
</template>
<script lang="ts" setup>
import ChooseArea from '../../components/baseline/chooseArea/src/index.vue'
const changeArea = (value: any) => {
  console.log(value.province, value.city, value.area)
}
</script>
<style lang="scss" scoped></style>

擴展一： “省份、城市” 二級聯(lián)動數(shù)據(jù)

擴展一：“省份、城市、區(qū)縣、鄉(xiāng)鎮(zhèn)”四級聯(lián)動

擴展二：“省份、城市、區(qū)縣、鄉(xiāng)鎮(zhèn)、村莊”五級聯(lián)動

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容