element-plus 中的 Cascader 实现中国地区三级联动

npm install element-china-area-data -S

baseUser

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

import { regionData, codeToText } from 'element-china-area-data'
import { ref } from 'vue';

const options = ref(regionData)  //数据
const selectedOptions = ref([]) //选中的数据

//当选中值变化时触发的事件
const handleChange = (value: any) => {
    console.log(value) //区域码
    if (
        selectedOptions.value[0] != null &&
        selectedOptions.value[1] != null &&
        selectedOptions.value[2] != null
    ) {
        const str =
            codeToText[selectedOptions.value[0]] +
            '-' +
            codeToText[selectedOptions.value[1]] +
            '-' +
            codeToText[selectedOptions.value[2]]
        console.log(str)  //中文
    }
}