vue3 使用 element-china-area-data 实现地区选择器

文章介绍了如何引入element-china-area-datanpm包的v6版本,并在页面中引用el-cascader组件来实现省/市的二级联动效果。通过change事件获取省编码和市编码,并利用codeToText转换为中文名称。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、引入依赖包

npm install element-china-area-data 

2、页面引用

我引用的是v6版本,组件有改动

e6e36d6c83f85aeb41c156e79f48778f.png

 官网:element-china-area-data - npm 

下面用例:使用的是二级联动数据

780a14ea86f5694af844a2a28dc81d2c.png

 

<el-form-item label="省/市" label-width="130px" style="width: 100%;">
        <el-cascader :options="options" @change="handleChange"></el-cascader>
</el-form-item

<script setup> 

      import { provinceAndCityData, codeToText } from 'element-china-area-data'

      let options=ref(provinceAndCityData);

 

      const handleChange= (value)=> {
          let  provinceCode=value[0]; //省编码
          let  cityCode=value[1]          //市编码

          let  province= codeToText[value[0]];  //省中文

          let  city= codeToText[value[1]];  //市中文
    }

</script>

 

 

 

 

 

 

### 集成 `element-china-area-data` 实现省市区级联选择 为了在 Vue3 项目中集成 `element-china-area-data` 并实现省市区级联选择,需按照如下方式配置: #### 安装依赖库 首先安装所需的 npm 包。这包括 Element Plus 和 `element-china-area-data`。 ```bash npm install element-plus element-china-area-data ``` #### 引入并注册 Element Plus 组件 确保已经在项目的入口文件(通常是 main.js 或者 main.ts)里引入了 Element Plus 的样式以及组件,并进行了全局注册[^2]。 ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; // 引入ElementPlus及其CSS import ElementPlus from &#39;element-plus&#39; import &#39;element-plus/dist/index.css&#39; const app = createApp(App) app.use(ElementPlus) app.mount(&#39;#app&#39;) ``` #### 使用 `element-china-area-data` 数据源 接着,在需要展示省市区选择的地方导入 `regionData`,并将它绑定到 `<el-cascader>` 组件上作为选项列表[^1][^3]。 ```html <template> <div id="app"> <!-- 级联选择器 --> <el-cascader placeholder="请选择地区" :options="regionData" v-model="selectedOptions" @change="handleChange" /> <!-- 显示选中的地址文字描述 --> <p>已选择: {{ selectedAddress }}</p> </div> </template> <script setup lang="ts"> import { ref, computed } from &#39;vue&#39;; import { ElCascader } from &#39;element-plus&#39;; import { regionData, codeToText } from &#39;element-china-area-data&#39;; let selectedOptions = ref([] as string[]); // 计算属性用于显示所选地区的名称 const selectedAddress = computed(() => { let result = &#39;&#39;; if (selectedOptions.value.length === 0) return &#39;&#39;; for(const areaCode of selectedOptions.value){ result += `${codeToText[areaCode]} `; } return result.trim(); }); function handleChange(value:string[]){ console.log(&#39;选择了:&#39;, value); } </script> ``` 上述代码展示了如何通过 `v-model` 将用户的选择保存至 `selectedOptions` 变量中;并通过计算属性 `selectedAddress` 来动态更新页面上的文本提示信息。当用户改变选择时会触发 `handleChange()` 方法来处理逻辑变化[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值