基于vue3.2的element-plus省市区选择器

<template>
  <div class="wrap">
    <!--默认使用-->
    <elui-china-area-dht @change="onChange"></elui-china-area-dht>
    <!--带isall参数和leave参数示例-->
    <elui-china-area-dht isall :leave="2" @change="onChange"></elui-china-area-dht>
  </div>
</template>

<script lang="ts" setup>
    import { getData } from "@/api/lineCity";
    import { EluiChinaAreaDht } from 'elui-china-area-dht'
    const chinaData = new EluiChinaAreaDht.ChinaArea().chinaAreaflat

    // 覆盖区县
    const onChange = (e:any) => {
        const province = chinaData[e[0]]
        const city = chinaData[e[1]]
        const area = chinaData[e[2]]
        console.log(province, city ,area)
    }
</script>

基于vue3.2的element-plus省市区选择器

下载安装命令 npm i elui-china-area-dht

leave    数据可选层级，3代表省市区三级级联选项

---

补充：关于回显问题，我是做了2个div， 点击事件，if 隐藏div的方法。

如果小伙伴还有更好的方法，评论区留言分享