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

必备UI组件

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

组件设计

修改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

为了拿到省市区的数据，进入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下。
可以看到其中数据结构如下：

image.png

完善src\components\baseline\chooseArea\src\index.vue

image.png

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

image.png

优化，通过watch进行处理：

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

image.png

进一步完善：

修改src\views\chooseArea\index.vue

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

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

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