Element UI 中国省市区级联数据js

1.安装

npm install element-china-area-data -S

引入

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

regionData是省市区三级联动数据（不带“全部”选项）
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
extToCode是个大对象，属性是汉字，属性值是区域码用法例如：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 { 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>

Element UI 中国省市区级联数据js相关推荐

vue + element UI中国省市区级联数据
安装 npm install element-china-area-data -S 使用 import { provinceAndCityData, regionData, provinceAndCi ...
Element UI 中国省市区级联
一.安装 npm install element-china-area-data -S 二.使用 import { provinceAndCityData, regionData, provinceA ...
Vue + Element UI 中国省市区数据三级联动
安装数据 npm install element-china-area-data 页面引入 import { provinceAndCityData, regionData, provinceAndC ...
与element ui结合省市区三级联动
与element ui结合省市区三级联动首先需要的肯定是数据了,自己搜索了一下,无外乎就是json数据,这就到了第一个问题, 如果你有数据只是不知道怎么样引入在vue中如何引入json文件首先你 ...
解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找
解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找参考文章: (1)解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找 (2)https://ww ...
element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
DataGear 数据可视化看板内置了一些基本.简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架. 本文以Vue2.Element UI前端框架为例,介绍如何制作具有更 ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
Element ui 中 el-cascader 级联动态加载数据方法
话不多说,上代码 html部分: <el-cascader :props="treeOption" @change="onChange" style=&q ...

Element UI 中国省市区级联数据js

Element UI 中国省市区级联数据js相关推荐

最新文章

热门文章