【Vue3+Vite+TS】4.0 组件三：省市区选择组件

必备UI组件

省市区选择组件将用到以下几个组件：
Select 选择器

组件设计

修改srcrouterindex.ts

/*
 * @Author: bobokaka
 * @Date: 2021-12-19 11:26:38
 * @LastEditTime: 2021-12-21 19:49:02
 * @LastEditors: bobokaka
 * @Description: 路由
 * @FilePath: vue3-element-ui-baselinesrcrouterindex.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

新建srcviewschooseAreaindex.vue

为了拿到省市区的数据，进入github。
https://github.com/modood/Administrative-divisions-of-China

直接下载即可。

将该项目下Administrative-divisions-of-China-masterdistpca-code.json复制到项目srccomponentsbaselinechooseArealibpca-code.json下。
可以看到其中数据结构如下：

完善srccomponentsbaselinechooseAreasrcindex.vue

但是这里会报错，computed不能去修改只读的属性。

优化，通过watch进行处理：

以上代码解决了报错，进一步优化：

进一步完善：

修改srcviewschooseAreaindex.vue

扩展一： “省份、城市” 二级联动数据

扩展一：“省份、城市、区县、乡镇”四级联动

扩展二：“省份、城市、区县、乡镇、村庄”五级联动