VUE3+ElementPlus 省市区选择组件

1.数据来源： element-china-area-data 官方网址：www.npmjs.com/package/ele…

npm install element-china-area-data -S

2.使用Elementplus级联器 el-cascader

官方文档：Cascader 级联选择器 | Element Plus (element-plus.org)

<script setup lang="ts>
import { regionData, codeToText } from 'element-china-area-data'
const userAddress = ref({} as userAddresses)
const selectedOptions= ['110000', '110100', '110101']
const props = {
    expandTrigger: 'hover' as const,
}

function addressChange(arr: any) {
    userAddress.value.provinceCode = arr[0]
    userAddress.value.cityCode = arr[1]
    userAddress.value.countyCode = arr[2]
    userAddress.value.fullLocation = codeToText[arr[0]] + codeToText[arr[1]] + codeToText[arr[2]]
}
</script>

<template>
<el-cascader @change="addressChange" 
                v-model='selectedOptions'
                :options="regionData"
                :props="props"        
                clearable
                ></el-cascader>
</template>