Plortinus / Element China Area Data
Licence: mit
🇨🇳 Element UI && antd Cascader级联选择器 中国省市区三级、二级联动option数据
Stars: ✭ 793
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Element China Area Data
Ruoyi Vue
(RuoYi)官方仓库 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统
Stars: ✭ 596 (-24.84%)
Mutual labels: element-ui
Tree Transfer
一个基于vue和element-ui的树形穿梭框及邮件通讯录。A tree shaped shuttle box assembly based on Vue and element-ui. Vuecli3版本见https://github.com/hql7/wl-tree-transfer 示例见->
Stars: ✭ 443 (-44.14%)
Mutual labels: element-ui
Vue Seed
a boilerplate for large vue project with ElementUI 2.x
Stars: ✭ 555 (-30.01%)
Mutual labels: element-ui
Node Vue Moba
Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台
Stars: ✭ 750 (-5.42%)
Mutual labels: element-ui
Shirojwt
API SpringBoot + Shiro + Java-Jwt + Redis(Jedis)
Stars: ✭ 503 (-36.57%)
Mutual labels: element-ui
Elementvuespringbootcodetemplate
使用Vue+VueX+ElementUI+SpringBoot的代码框架
Stars: ✭ 597 (-24.72%)
Mutual labels: element-ui
Vue Boilerplate Template
🍎 Efficient development of web SPA using Vue.js(2.*) + Webpack + Element-ui + Pwa + Vuex + Vuex-router + Vue-i18n + Dayjs + Lodash.
Stars: ✭ 461 (-41.87%)
Mutual labels: element-ui
Element Tiptap
🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue.js
Stars: ✭ 481 (-39.34%)
Mutual labels: element-ui
Mogu blog v2
蘑菇博客(MoguBlog),一个基于微服务架构的前后端分离博客系统。Web端使用Vue + Element , 移动端使用uniapp和ColorUI。后端使用Spring cloud + Spring boot + mybatis-plus进行开发,使用 Jwt + Spring Security做登录验证和权限校验,使用ElasticSearch和Solr作为全文检索服务,使用Github Actions完成博客的持续集成,使用ELK收集博客日志,文件支持上传七牛云和Minio,支持Docker Compose脚本一键部署。
Stars: ✭ 561 (-29.26%)
Mutual labels: element-ui
Vue Admin Html
Vue-cli3.0 + Element UI + Spring Boot2.0 + ThinkPHP5.1 + 响应式的后台管理系统 https://lmxdawn.github.io/vue-admin
Stars: ✭ 436 (-45.02%)
Mutual labels: element-ui
Vue Admin Spa
基于vue2.0生态的后台管理系统模板(spa)。 a vue management system template based on :vue2.0 + vue-router + vuex + element-ui +ES6+ webpack + npm。
Stars: ✭ 772 (-2.65%)
Mutual labels: element-ui
Element UI 中国省市区级联数据
安装
npm install element-china-area-data -S
在线示例
使用
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
服务端用法:
const { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } = require('element-china-area-data/dist/app.commonjs')
-
provinceAndCityData
是省市二级联动数据(不带“全部”选项) -
regionData
是省市区三级联动数据(不带“全部”选项) -
provinceAndCityDataPlus
是省市区三级联动数据(带“全部”选项) -
regionDataPlus
是省市区三级联动数据(带“全部”选项) - "全部"选项绑定的value是空字符串
""
-
CodeToText
是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText['110000']
输出北京市
-
TextToCode
是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode['北京市'].code
输出110000
,TextToCode['北京市']['市辖区'].code
输出110100
,TextToCode['北京市']['市辖区']['朝阳区'].code
输出110105
-
省市二级联动(不带“全部”选项):
<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div> </template> <script> import { provinceAndCityData } from 'element-china-area-data' export default { data () { return { options: provinceAndCityData, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } } </script>
-
省市二级联动(带“全部”选项):
<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div> </template> <script> import { provinceAndCityDataPlus } from 'element-china-area-data' export default { data () { return { options: provinceAndCityDataPlus, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } } </script>
-
省市区三级联动(不带“全部”选项)
<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div> </template> <script> import { regionData } from 'element-china-area-data' export default { data () { return { options: regionData, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } } </script>
- 省市区三级联动(带“全部”选项)
<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div> </template> <script> import { regionDataPlus } from 'element-china-area-data' export default { data () { return { options: regionDataPlus, selectedOptions: [] } }, methods: { handleChange (value) { console.log(value) } } } </script>
-
绑定value格式
value是区域码"110000"
数据来源
开发过程
npm run dev
是开发
npm run build
+ npm run build-commonjs
+ npm run docs
是准备发布
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].