npm 省市区数据

最新推荐文章于 2024-08-16 09:24:26 发布
最新推荐文章于 2024-08-16 09:24:26 发布
阅读量1.4k 收藏 5
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45585764/article/details/114489559
版权
本文介绍了如何通过npm安装和导入element-china-area-data库，用于实现省市二级和三级联动数据，提供了带或不带'全部'选项的数据，并详细说明了CodeToText和TextToCode的使用方法。
摘要由CSDN通过智能技术生成

下：npm i element-china-area-data

导：import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from ‘element-china-area-data’

  1. provinceAndCityData是省市二级联动数据（不带“全部”选项）

  2. regionData是省市区三级联动数据（不带“全部”选项）

  3. provinceAndCityDataPlus是省市二级联动数据（带“全部”选项）

  4. regionDataPlus是省市区三级联动数据（带“全部”选项）

  5. "全部"选项绑定的value是空字符串""

  6. CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市

  7. TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市'][

最低0.47元/天 解锁文章
HHH番茄
关注
省市区的数据javaScript _data.js
08-09
这个里面存放的是省市区的代码，用于省市区三级联动，value是省市区的区行政代码，希望对你有用！
省市区三级联动插件（v-distpicker）
不甜呐的博客
09-02 1288
安装： npm install v-distpicker --save //npm安装 全局注册： //全局注册 import Distpicker from 'v-distpicker' Vue.component('v-distpicker', Distpicker) 局部注册： //局部注册 import VDistpicker from 'v-distpicker' export default { components: { VDistpicker }} 基础： //基础
开源项目 `area-data` 使用教程
最新发布
gitblog_00094的博客
08-16 407
开源项目 area-data 使用教程 area-data中国省市区数据(含港澳台)项目地址:https://gitcode.com/gh_mirrors/ar/area-data 项目介绍 area-data 是一个提供中国行政区域数据的开源项目，旨在帮助开发者快速获取和使用中国的省、市、县等行政区划信息。该项目通过 JSON 格式提供数据，便于在前端或后端应用中进行解析和使用。 项目快速启动...
手把手教你用Node爬取国家统计局最新省市区数据并生成一个JSON文件
weixin_33738578的博客
01-15 966
前言 FBI WARNING: 作为一个中途自学转行到正式参加工作大半年的萌新码农，从大家的文章中学到了不少，当然最大的一个感受就是学的越多，不懂的也就越多。值得庆幸的是，学习的过程并没有那么枯燥，反而有种海绵吸水般的满足感与幸福感，或许这本身就是学习的乐趣吧，这篇文章也是本人第一篇技术文章，写得不好或者不对的地方，还请各位观众老爷多多包涵并且指出来，我铁汉柔情-王富贵在此谢谢大家了。 背...
中国省市区数据——china-area-data 教程
gitblog_00726的博客
08-08 850
中国省市区数据——china-area-data 教程 项目地址:https://gitcode.com/gh_mirrors/ch/china-area-data 1. 项目介绍 china-area-data 是一个用于存储中国所有省、市、区县的开源数据集，提供JSON格式的数据文件。该项目主要用于处理地理信息相关的前端或后端应用，例如地址选择器、地图应用等。它包含了从省级到县级的最新行政区域...
china-area-data:中国省市区数据
05-10
npm install china-area-data 版本说明 目录下的 data.json 默认为最新版本。务必先查看变更再升级大版本。 v5 更新最新数据。 东莞和中山没有区，填充了下一级的县信息。 补充了台湾省数据。 增加 data-array.json ...
vue省市区组件，mint-ui封装的省市区组件
07-03
在实际应用中，`getAreaName` 方法会根据 `id` 在相应的省市区数据结构中查找并返回名称。当用户在 Distpicker 中选择时，`onConfirm` 方法会被触发，输出选定的省市区名称。 总的来说，通过 Mint-UI 的 Distpicker...
PCA的MATLAB仿真代码-area-data:中国省市区数据(含港澳台)
06-11
pcaa.js，前者仅包含省市数据，后者包含省市(县)区数据 v3.1 增加广东省中山市和东莞市的区镇数据(参考京东 pc 端的地区选择) v3 增加港澳台数据(参考京东 pc 端的地区选择)，v3之后不再提供或更新街道数据 v2 v2...
vue实现移动端省市区选择
10-16
总的来说，Vue实现移动端省市区选择涉及到组件的创建、事件监听、数据绑定以及CSS样式设计。`v-distpicker`库简化了这个过程，使得我们可以快速构建具有省市区三级联动功能的界面。通过这种方式，开发者可以提高开发...
nuxt 使用中国地区数据
qq_44767646的博客
07-02 478
nuxt 使用地区数据 1、安装依赖 yarn add china-area-data lodash-es 2、创建 area.js /* 来源于 element-china-area-data/src/app.js */ /** * 地区数据 */ import REGION_DATA from 'china-area-data' import cloneDeep from 'lodash/cloneDeep' // import { cloneDeep } from 'lodash-es' //
【Vue2】Vant使用Vant Area Data中国省市区数据保姆级教程 Vue2移动端项目实战vant组件 area组件
qq_51055690的博客
08-11 8588
Vue中使用Vant的地址组件，Vue使用@vant/area-data npm i @vant/area-data保姆级教程
Cascader 级联选择器结合npm包“element-china-area-data“实现省市区级联选择 相关问题总结
你的阿迁
09-08 317
因为我之前在开发的时候，装的是这个包的最新版本，是完全没有问题的，然后在提交代码的时候，发现公司的架子里是有这个包的（"^5.0.2"），我就果断把我装的给撤了...我就考虑是不是包版本带来的问题，然后去仔细查阅了一下，发现不同版本的包，导出的方法是有区别的...但是bug总是不忍心看到你这么轻松的样子... 再来看下遇到的第二个问题，就是编辑的时候，级联数据不能正常回显了，简直我草了...今天把之前已经对接好的项目打开看了一下，发现省市区级联选择器出现了问题... 接下来就给大家分享一下。
使用element-china-area-data第三方组件实现省市区的级联选择
weixin_61978391的博客
05-11 1151
el-form-item label="项目所在城市" prop="Project_City" :rules="rules.Project_City">CodeToText：属性是区域码，属性值是汉字,用法： console.log(CodeToText['330000']) 浙江省。provinceAndCityDataPlus：省市区二级联动，带全部的选项。provinceAndCityData：省市的二级联动，不带全部的选项。regionData：省市区的三级联动，不带全部的选项。
懒人福音！Vue+element-china-area-data实现省市区三级联动只需几步操作
希望看完文章的你能够带着答案离开
04-20 1万+
懒人福音！Vue+element-china-area-data实现省市区三级联动只需几步操作
地区联动插件element-china-area-data的使用(支持vue2和vue3)
热门推荐
不甜呐的博客
08-15 1万+
省市区联动
数据不全，是2016前的数据，area-data 不建议使用 【三级联动】基于vue使用element定义一个三级联动省市级选择器
AAAXiaoApple的博客
08-12 797
组件详细使用说明vue-area-linkage。1.引入中国省市区数据(含港澳台)第一步:main.js中引用。
vue省市区三级联动vue-area-linkage
weixin_42261408的博客
05-22 3653
1、安装vue-area-linkage插件：npm install --save vue-area-linkage --2、main.js里面注入import VueAreaLinkage from 'vue-area-linkage'import 'vue-area-linkage/dist/index.css'Vue.use(VueAreaLinkage) 3、组件里：<area-se...
vue element ui 省市区联动
09-14
Vue Element UI 提供了一些组件和方法来实现省市区联动选择。以下是一种实现方式： 1. 安装 Element UI：首先确保你的项目中已经安装了 Vue 和 Element UI。如果没有安装，可以使用 npm 或者 yarn 进行安装： ```bash npm install element-ui --save # 或者 yarn add element-ui ``` 2. 引入需要的组件：在你的 Vue 项目入口文件（一般是 main.js）中，引入 Element UI 的样式和需要的组件： ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 创建组件：创建一个包含省市区选择的组件，可以使用 `el-cascader` 组件来实现： ```vue <template> <div> <el-cascader :options="options" v-model="selectedValues" :props="props" @change="handleCascaderChange" ></el-cascader> </div> </template> <script> export default { data() { return { options: [ { value: 'province1', label: '省份1', children: [ { value: 'city1', label: '城市1', children: [ { value: 'district1', label: '区域1' }, { value: 'district2', label: '区域2' } ] }, { value: 'city2', label: '城市2', children: [ { value: 'district3', label: '区域3' }, { value: 'district4', label: '区域4' } ] } ] }, // 其他省市区数据 ], selectedValues: [] }; }, computed: { props() { return { value: 'value', label: 'label', children: 'children' }; } }, methods: { handleCascaderChange(selectedValues) { // 处理省市区选择变化的逻辑 console.log(selectedValues); } } }; </script> ``` 在上面的代码中，通过 `options` 数组来定义省市区的数据结构，然后使用 `el-cascader` 组件来展示选择框。`v-model` 指令绑定选中的值，`@change` 事件监听选择变化。 这样就实现了一个简单的省市区联动选择。你可以根据实际需求自定义数据结构和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值