vue 中国省市区级联数据下拉工具

最近vue玩的时候需要有一个全国省市区县的下拉工具选择地区，并且需要获取地市的行政编码。找了一个比较好用的插件，稍微分享一下。

element-china-area-data

这是一个中国省市区连级数据下拉工具，可以获取行政区编码，也可以获取省市区的名称，具体的效果是下面的样子。

element-china-area-data 使用

这个工具使用起来也很简单。

npm 网址： https://www.npmjs.com/package/element-china-area-data

安装

使用 npm 安装。

npm install element-china-area-data -S

在需要使用连级选择的页面引入插件。

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

说明：

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
“全部"选项绑定的value是空字符串”"
CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText[‘110000’]输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码用法例如：
- TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100
- TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

案例

<template><div id="app"><el-cascadersize="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>

好了，具体可以看 npm 网站的案例。

vue 中国省市区级联数据下拉工具相关推荐

vue + element UI中国省市区级联数据
安装 npm install element-china-area-data -S 使用 import { provinceAndCityData, regionData, provinceAndCi ...
Vue使用vue-pull-refresh插件实现下拉刷新
效果 vue-pull-refresh插件 github地址: https://github.com/lakb248/vue-pull-refresh 在线Demo演示: https://lakb24 ...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
TableauBDP，哪个才是最适合中国用户的数据可视化分析工具？
作者:pledge 本人数据分析师一枚,除了工作所需,自己对数据分析.数据可视化的产品工具都比较感兴趣,喜欢混迹于各种数据论坛,也发现和使用了不少数据工具,也积累了很多亲身经历.这两年数据可视化在国内 ...
2018最新版省市区三级联动下拉框+所有源代码以及数据库
2018年国家统计局最新数据,JSP+Servlet+Dao实现省市区三级联动下拉框的效果 DropdownDAO.java -–Dao层 package com;import java.sql.Co ...
vue-scroller的使用以及使用的那些坑(上拉获取数据下拉刷新)
最近做手机公众号需要做上拉获取数据的功能,选择了vue-scroller. vue-scroller可以实现下拉刷新,上拉获取数据的功能.话不多说,开始. 一安装使用npm 安装 npm inst ...
城市地区级联二级下拉选择菜单js特效
城市地区级联二级下拉选择菜单js特效:城市级联选择,js地区选择.js特效 <script type="text/javascript">var pc = new Ar ...
中国地区三级联动下拉菜单的实现
1.首先是js文件(area.js): 1 function Dsy() 2 { 3 this.Items = {}; 4 } 5 Dsy.prototype.add = function(id,iA ...
EasyExcel 实现单元格数据下拉选
EasyExcel 实现单元格数据下拉选前言 easyExcel导出模板的时候,固定的某个列我们有固定的是选项值的时候,我们需要将excel的单元格做成下拉选的情况:满足实际的业务需求. 实现 1. ...
仿携程oracle课程设计,一个不错的仿携程自定义数据下拉选择select
这是一个仿携程自定义的数据下拉选择select,对一些比较重要的参数进行的描述,方便初学者 /* *id : id 当前插件的父元素 *data : json 选择的数据(json格式) *bool ...

vue 中国省市区级联数据下拉工具

vue 中国省市区级联数据下拉工具

element-china-area-data

element-china-area-data 使用

安装

案例

vue 中国省市区级联数据下拉工具相关推荐

最新文章

热门文章