省市区选择器

一、巧用watch来达到三级联动效果

1.在component文件夹下创建文件夹chooseArea,创建对应文件
2.在views下面注册组件，然后在router下面配置路由

{
      path:'/chooseArea',
      component:() => import('../views/chooseArea/index.vue'
 },

3.从github下载所需要的省市区数据

area2.png

area3.png

这里使用的是省市区三级联动数据，带编码的pca-code-json文件

4.代码

二、完善省市区组件并给父组件分发事件

1.创建接口并导出

export interface AreaItem{
    name:string,
    code:string,
    children?:AreaItem[]
}

export interface Data{
    name:string,
    code:string
}

2.分发事件给父组件

let emits = defineEmits(['change'])

3.监听选择区域

watch(()=>area.value,val => {
    if(val){
        let provinceData:Data ={
            name:province.value,
            code: province.value && allAreas.find(item => item.name === province.value)!.code
        }
        let cityData:Data = {
            name:city.value,
            code:city.value && selectCity.value.find(item => item.name === city.value)!.code
        }
        let areaData:Data = {
            name:val,
            code:val && selectArea.value.find(item => item.name === val)!.code
        }
        // console.log(provinceData,cityData,areaData);
        emits('change',{
            province:provinceData,
            city:cityData,
            area:areaData
        })
    }
})

4.在注册的父组件中，引入事件
views/chooseArea/index.vue

三、完整代码

components/chooseArea/src/index.vue

四、界面效果

省市区选择器.png

点击省选择器上的取消可以全部清除区域，点击市级选择器上的小叉叉可以清除市级和区级的内容，选择区级的小叉叉只能清除区级内容，重新选择时下级的内容也会全部清除，跟我们平时一些软件网页的选择器是一样的效果。