【Strelitzia项目】vue3+ts实现element-plus中选择器省市区三级联动

简介

最近在部署项目时，想要做一个收货地址的功能，但是仅凭用户自己去输入地址感觉不太规范，假设用户输入了一个假的地址改如何处理呢，所以需要做出一个比较规范的选择器来解决这个问题。但是在这个问题的过程中存在着不少疑惑，首先就是百度找不到vue3+ts的代码，而自己本身又是后端开发人员，所以在技术层面存在着不少的疑问，vue2编写代码的方式不太熟练。所以借鉴了这篇博客，首先非常感谢这篇博客给我提供的思路 参考文章

内容

1.编写js内容

首先 点击查看这个网址中的数据格式，https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.jsonopen in new window
再去需要定义好需要接受数据的对象，其中三个常量分别是province、city 、area ，接受的数据是省、市、区三级的数据，其次是定义一个接受数据的类型 AreaList，并且创建好三个数据用于存放获取到的JSON数据

import axios from 'axios';
import {
    onBeforeMount, ref, watch } from 'vue'

const province = ref('')
const city = ref('')
const area = ref('')

export type AreaList = {
   
  code: string
  level: number
  name: string
  areaList: AreaList[]
}
const provinceList = ref<AreaList[]>([])
const cityList = ref<AreaList[]>([])
const areaList = ref<AreaList[]>([])

定义好接收数据的格式之后，需要去编写组件的样式

<div style="display: flex;">
    <el-select v-model="province" clearable placeholder="Select">
      <el-option v-for="item in provinceList" :key="item.code" :label="item.name" :value="item.name" />
    </el-select>
    <el-select v-model="city" clearable placeholder="Select">
      <el-option v-for="item in cityList" :key=