最简单的el-cascadert省市区三级/二级联动

需求:需要实现省市区的三级联动或者二级联动的功能,找了半天找到这个最简单的插件实现,无需自己找json,直接下载导入就有了。

插件地址:element-china-area-data - npm (npmjs.com)

里面有使用方法,我就是跟着里面的方法写的,此贴就是记录贴。

1.效果

最简单的el-cascadert省市区三级/二级联动_第1张图片

2.下载插件

我下的最新版,这边要注意一下,有些小伙伴下的是旧版,旧版的codeToText是大写的C,新版改成小写了

npm install element-china-area-data

3.导入

这个根据需求导入哈

字段讲解:

  1. provinceAndCityData省市二级联动数据,汉字+code
  2. regionData省市区三级联动数据
  3. pcTextArr省市联动数据,纯汉字
  4. pcaTextArr省市区联动数据,纯汉字
  5. codeToText是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText['110000']输出北京市
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data"; //导入地图数据

4.二级联动使用



效果

最简单的el-cascadert省市区三级/二级联动_第2张图片

5.省市区三级联动






还有其他的可以自行探索,文章到此结束,希望对你有所帮助~

你可能感兴趣的:(vue-插件,vue2,Element,vue.js,elementui,前端)