vue3实现省市联动表项

概述

所用技术栈：vue3+ElementPlus

需求：要求在对用户信息中的籍贯信息录入时，有一个省市联动的表单可供选择

具体实现

参考文档：https://www.npmjs.com/package/element-china-area-data

下载对应插件：

npm install element-china-area-data -S

导入库：

import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";

vue3页面代码的实现：

<el-cascader
  size="large"
  :options="pcTextArr"
  v-model="sd"
  @change="handleChange"
  >
</el-cascader>

const sd = ref([])
//这里的authorMsg为存储最后选择结果的字段
function handleChange(){
  authorMsg.city = sd.value[0]+sd.value[1]
}

实现效果