vue+ElementPlus实现中国省市区三级级联动封装

安装插件获取中国省份的所有数据

javascript 复制代码
 npm install element-china-area-data -S

借助ElementPlus 级联选择器 Cascader实现

javascript 复制代码
<template>
    <div>
     <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange">
        </el-cascader>
        {{  selectedOptions  }}

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { regionData ,codeToText } from 'element-china-area-data'
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)  //中文
    }
}

</script>

<style lang="scss" scoped>

</style>
实现效果
相关推荐
挽淚2 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴3 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte6 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常8 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常9 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101813 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
南篱15 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
Struggler28120 分钟前
Chrome插件开发
前端
前端 贾公子33 分钟前
Monorepo + vite 怎么热更新
前端
coding随想41 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript