vue 城市选择器(省市区)的使用 element-china-area-data
一、Element UI 中国省市区级联数据
本文参考:Element UI 中国省市区级联数据
本文参考:根据此文做的整理
1. 安装
npm install element-china-area-data -S
2. 使用
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
- regionData是省市区三级联动数据(不带“全部”选项)
- CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市
- extToCode是个大对象,属性是汉字,属性值是区域码用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
3.CodeToText的使用
数据示例:codeStr=‘110000,110100,110101’, codeArray=[110000,110100,110101]
getCodeToText(codeStr, codeArray) {if (null === codeStr && null === codeArray) {return null;} else if (null === codeArray) {codeArray = codeStr.split(",");}let area = "";switch (codeArray.length) {case 1:area += CodeToText[codeArray[0]];break;case 2:area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];break;case 3:area +=CodeToText[codeArray[0]] +"/" +CodeToText[codeArray[1]] +"/" +CodeToText[codeArray[2]];break;default:break;}return area;}
4. TextToCode 的使用
北京市/市辖区/东城区 转换成 110101
在获取详情信息的接口中,使用TextToCode 将字符串转换成编码赋给 selectedOptions
this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code;
如果想选择任意一级,比如只选省市不选取的话,可以增加条件判断
if (this.addForm.area.split('/')[2]) {this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code;
} else {this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]].code;
}
5 整体代码:省市三级联动(不带“全部”选项)
如果想选择任意一级,可以使用element-ui的级联选择器中的选择任意一级选项的选择器,给el-cascader添加:props="{ checkStrictly: true }"
属性
<template><div id="app"><el-cascadersize="large":options="options"v-model="selectedOptions"@change="handleChange"></el-cascader></div>
</template><script>import { regionData, CodeToText, TextToCode } from 'element-china-area-data'export default {data () {return {options: regionData,selectedOptions: []}},methods: {// 在获取详情信息接口中使用 TextToCode 将字符串转换成编码赋给 selectedOptions projectInfo () {var that = this;getProjectInfo({ token: getToken(), id: that.id }).then(res => {this.addForm = {id: res.id,// 基础信息p_name: res.p_name, //项目名p_message: res.p_message, //项目信息area: res.area, //地区remark: res.remark, //备注}this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code;}).catch(err => {Message.error(err)})},handleChange (value) {console.log(value)this.getCodeToText(null, value)},getCodeToText (codeStr, codeArray) {if (null === codeStr && null === codeArray) {return null;} else if (null === codeArray) {codeArray = codeStr.split(",");}let area = "";switch (codeArray.length) {case 1:area += CodeToText[codeArray[0]];break;case 2:area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];break;case 3:area +=CodeToText[codeArray[0]] +"/" +CodeToText[codeArray[1]] +"/" +CodeToText[codeArray[2]];break;default:break;}console.log(area)this.addForm.area = areareturn area;}}}
</script>
最后效果:
点击编辑后:
vue 城市选择器(省市区)的使用 element-china-area-data相关推荐
- 【vue使用城市选择器】
vue引入城市选择器省市县菜单联动 第一步 引入依赖 第二步 在main.js文件中进行挂载 第三步 在页面注册引用 第四步 定义标签使用 页面展现效果 添加监听事件获取数据 查看获取到的数据 自定义 ...
- vue | 基于vue的城市选择器和搜索城市对应的小区
城市选择器应该是比较常用的一个组件,用户可以去选择自己的城市,选择城市后返回,又根据自己选择的城市搜索小区. 功能展示 这是选择结果 这是选择城市 这是搜索小区 这是搜索小区接口,key为城市名字,i ...
- vue颜色选择器_如何制作? Vue的颜色选择器!
vue颜色选择器 by ZAYDEK 由ZAYDEK 如何制作? Vue的颜色选择器! (How to make a ? color picker with Vue!) 注意:颜色看起来可能比实际颜色 ...
- vue城市三级联动组件 vue-area-linkage
Install the pkg with npm: // v5之前的版本 npm i --save vue-area-linkage// v5及之后的版本 npm i --save vue-area- ...
- 七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
- 【vue js】省市区js数据转为tree结构
使用: //引入 import { addressToTree } from '@/utils/area';data(){return {// 地区数据areaOptions:addressToTre ...
- iOS开发:城市选择器集成
一.简介 该项目集成了三种类型的城市选择器: 1.XXCityPickerView 省市区,可以分级:1省 2省-市 3省-市-区 2.SQSelectAddress 省市区乡/镇,页面跳转 3.Ra ...
- Vue 城市联动下拉选择组件实现
在做项目的过程中遇到需要选择城市的表单,需要使得 省市区 三级联动选择.element-ui 中有相关组件,但该组件将三者统一在同一个 select 下拉选择框,使得数据双向绑定时还需要切分数据.故考 ...
- Vue报错:Unknown custom element: router-view - did you register the component correctly页面中不显示链接
Vue报错:Unknown custom element: router-view - did you register the component correctly vue-router应用到组件 ...
最新文章
- 几行代码构建全功能的对象检测模型,他是如何做到的?
- python数据类型之内置方法
- 即插即用 | S-FPN全新的金字塔网络,更适合轻量化模型的FPN
- 中国顶级互联网公司的技术组织架构调整预示着什么?【强烈推荐行业人士阅读】
- 前端技术周刊 2018-12-03:DOM
- kafka与Spring的集成
- Java中在时间戳计算的过程中遇到的数据溢出问题
- Android CoordinatorLayout
- 算法训练 Bus Tour
- 【语音隐写】基于matlab GUI DWT+SVD音频水印嵌入【含Matlab源码 1409期】
- Java学习路线|【完整版】
- c语言召唤窗口,如何设计出高点击率的行为召唤按钮?
- 常见的HTPP状态码
- django前端页面下拉选择框默认值设置
- LINUX漏洞复现篇之ShellShock漏洞
- 旺旺机器人的快捷短语_机器人配置和我的快捷短语
- 【股票】java+js获取股票实时数据
- Python challenge 全部题解
- sar点目标成像matlab,SARrawdata 根据矩阵中的高度数据,通过SAR点目标成像算法 过程,将 转换为实际从飞机 matlab 272万源代码下载- www.pudn.com...
- CPI指数反弹有望 物联网行业将为市场带来贡献
热门文章
- 微信中打开分享链接提示已停止访问该网页的原因及解决办法
- 使用echarts画日历热力图自定义区间颜色值
- 使用SAF Spectrum Compact频谱仪MASK MODE功能观察天线交叉极化鉴别率
- MTK Android N 源码Rom Root
- 三菱FX1N FX3U底层源码,PLC生产方案,定位源码
- centos7 安装单机 ClickHouse
- java毕业设计HTML5寿光农产品资源展示平台源码+系统+数据库+lw文档+调试运行
- 华东种业第一展——2014济南种子展的热闹和门道
- SpringBoot 分布式系统简单了解
- 如何在Microsoft Excel中使用SUBTOTAL函数