elementUI之省市区三级联动

最新推荐文章于 2025-04-03 18:01:04 发布

Muchen灬

最新推荐文章于 2025-04-03 18:01:04 发布

阅读量8.8k

点赞数 11

分类专栏： ElementUI 地图功能模块应用文章标签： elementui

本文链接：https://blog.csdn.net/qq_40976321/article/details/119034296

版权

ElementUI 同时被 2 个专栏收录

8 篇文章

订阅专栏

地图功能模块应用

1 篇文章

订阅专栏

这篇博客介绍了如何利用Element UI组件库中的el-cascader实现省市区三级联动的效果。首先，通过npm或cnpm安装element-china-area-data包，然后在目标页面导入所需数据。接着，在Vue项目的data中定义选项并绑定到el-cascader组件，最后监听change事件获取选中值。示例代码可以直接复制到项目中运行，实现省市区选择功能。

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

element – 省市区三级联动

官方文档地址：https://www.npmjs.com/package/element-china-area-data

1、安装组件依赖

npm install element-china-area-data -S
或者
cnpm  install element-china-area-data -S

2、目标页面中引入

import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";

3、使用el-cascader标签

<div style="width:460px;">
  <el-cascader style="width:100%;" :options="options" 
  v-model="selectedOptions" @change="addressChoose"></el-cascader>
</div>

4、data中定义元素

data(){
    return{
      // 省市区级联
      options: regionDataPlus,
      selectedOptions: [],
    }
}

5、触发事件的函数方法

 /**省市区三级联动 */
addressChoose(value) {
  console.log("地址", value);
  console.log('省市区：',CodeToText[value[0]],CodeToText[value[1]],CodeToText[value[2]]);
}