vue 引用省市区三级联动(element-ui select)

npm 下载 axios

npm install --save axios

static 静态文件夹里

　　创建 json 文件夹

　　json 文件夹里创建 map.json

　　map.json 文件里写（复制粘贴即可用）

　　创建一个 demo 文件用于测试

　　XXX.vue

　　　　<div>

　　 <el-select v-model="sheng" @change="choseProvince" placeholder="省级地区">

　　 <el-option v-for="item in province" :key="item.id" :label="item.value" :value="item.id"></el-option>

　　 </el-select>

　　 <el-select v-model="shi" @change="choseCity" placeholder="市级地区">

　　 <el-option v-for="item in shi1" :key="item.id" :label="item.value" :value="item.id"></el-option>

　　 </el-select>

　　 <el-select v-model="qu" @change="choseBlock" placeholder="区级地区">

　　 <el-option v-for="item in qu1" :key="item.id" :label="item.value" :value="item.id"></el-option>

　　</el-select>

　　</div>

　　</template>

　　　　import axios from "axios";

export default {

name:'near',

data(){

return{

//请求省市区的json文件

mapJson: "../static/json/map.json",

province: "",

sheng: "",

shi: "",

shi1: [],

qu: "",

qu1: [],

city: "",

block: "",

　　created() {

　　 this.getCityData()

　　methods:{

// 加载china地点数据，三级

getCityData:function(){

var that = this

axios.get(this.mapJson).then(function(response){

if (response.status==200) {

var data = response.data

that.province = []

that.city = []

that.block = []

// 省市区数据分类

for (var item in data) {

if (item.match(/0000$/)) {//省

that.province.push({id: item, value: data[item], children: []})

} else if (item.match(/00$/)) {//市

that.city.push({id: item, value: data[item], children: []})

} else {//区

that.block.push({id: item, value: data[item]})

}

// 分类市级

for (var index in that.province) {

for (var index1 in that.city) {

if (that.province[index].id.slice(0, 2) === that.city[index1].id.slice(0, 2)) {

that.province[index].children.push(that.city[index1])

}

// 分类区级

for(var item1 in that.city) {

for(var item2 in that.block) {

if (that.block[item2].id.slice(0, 4) === that.city[item1].id.slice(0, 4)) {

that.city[item1].children.push(that.block[item2])

}

}else{

console.log(response.status)

}

}).catch(function(error){console.log(typeof+ error)})

// 选省

choseProvince:function(e) {

for (var index2 in this.province) {

if (e === this.province[index2].id) {

console.log(this.province[index2].id)//你选择的省级编码

console.log(this.province[index2].value)//省级编码对应的汉字

this.shi1 = this.province[index2].children

this.shi = this.province[index2].children[0].value

this.qu1 =this.province[index2].children[0].children

this.qu = this.province[index2].children[0].children[0].value

this.E = this.qu1[0].id

}

// 选市

choseCity:function(e) {

for (var index3 in this.city) {

if (e === this.city[index3].id) {

this.qu1 = this.city[index3].children

this.qu = this.city[index3].children[0].value

this.E = this.qu1[0].id

}

// 选区

choseBlock:function(e) {

this.E=e;

　　}

　　</script>

vue 引用省市区三级联动(element-ui select)的更多相关文章

vue 引用省市区三级联动（插件）
vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入省市区三级联动 import Distpi ...
vue 引用省市区三级联动(element-ui Cascader)
npm 下载 npm install element-china-area-data -S main.js import {provinceAndCityData,regionData,provinc ...
vue实现省市区三级联动
npm 安装 npm install v-distpicker --save Vue全局引入组件 import Distpicker from 'v-distpicker' Vue.component ...
基于Vue的省市区三级联动插件
官网地址:https://distpicker.uine.org/ 安装: npm install v-distpicker --save 局部注册: import VDistpicker from ...
ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等宗旨:从实战中学习博 ...
【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
vue仿京东省市区三级联动选择组件
工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,显示效果如下:使用vue2.0开发 ht ...
vue省市区三级联动
仿照小米之家做的一个省市区三级联动,先上代码: HTML: <template> <section class="myAddress"> <secti ...
JS实现年月日三级联动+省市区三级联动+国家省市三级联动
开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

随机推荐

利用C++11可变模板，封装调用dll导出函数
起因开发中经常需要动态调用一些导出函数,试着利用C++11特性封装一下尝试常规使用 typedef int WINAPI (*TMessageBoxA)(HWND hWnd,LPCSTR lpT ...
福利！Python制作动态字符画（附源码）
字符画,一种由字母.标点.汉字或其他字符组成的图画.简单的字符画是利用字符的形状代替图画的线条来构成简单的人物.事物等形象,它一般由人工制作而成:复杂的字符画通常利用占用不同数量像素的字符代替图画上不 ...
jvm源码解读--20 结合jvm源码理解 java 设计模式模板方法
write by 张艳涛前言: 在学习jvm之前,看过设计模式的书,知道模板方法的设计模式,今天在看java并发编程的艺术里面关于AbstractQueuedSynchronizer 用法,这个就使 ...
Unsupported major.minor version 52.0解决办法【转】
1.首先解释一下报错原因: stanford parser和jdk版本对应关系 J2SE8=52, J2SE7=51, J2SE6.0=50, J2SE5.0=49, JDK1.4=48, JDK1. ...
thinkPHP5 5.0.23 远程代码执行漏洞
修改数据包 POST /index.php?s=captcha HTTP/1.1 Host: 192.168.49.2:8080 User-Agent: Mozilla/5.0 (Macintosh; ...
Mac搭建Vue开发环境
1.安装Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/ ...
Vue 动态绑定CSS样式
今天在做项目上遇见了一个需求,通过不能的进度类型展示不同的进度形态,进度形态通过背景色和背景色上的文字显示. 效果图: 由于Element UI版本我用的是2.5.4 使用进度条的话就没有2.9. ...
vue中rem的转换
1 function rems(doc: any, win: any): void { 2 let docEl = doc.documentElement, 3 resizeEvt = 'orient ...
postman之变量
前言:postman可以设置(环境变量)和(全局变量) (环境变量):环境变量只能在选择的环境中使用,可以有多组,常用在设置URL和密码当中 (全局变量):只能有一组,整个环境都可以应用 [环境变量] ...
网络安全学习阶段性总结：SQL注入|SSRF攻击|OS命令注入|身份验证漏洞|事物逻辑漏洞|目录遍历漏洞
目录 SQL注入什么是SQL注入? 掌握SQL注入之前需要了解的知识点 SQL注入情况流程分析有完整的回显报错(最简单的情况)--检索数据: 在HTTP报文中利用注释---危险操作检索隐藏数据: ...

vue 引用省市区三级联动(element-ui select)

vue 引用省市区三级联动(element-ui select)的更多相关文章

随机推荐

热门专题