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搜索都 ...

随机推荐

14Java进阶网络编程API
1.网络协议的三要素:语义.语法和时序语义表示要做什么,语法表示要怎么做,时序表示做的顺序. 2.网络OSI七层模型 OSI/RM 模型(Open System Interconnection/Re ...
基于Flask开发网站 -- 前端Ajax异步上传文件到后台
大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...
js学习笔记之日期倒计时(天，时，分，秒）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
还不了解一下 Java 8 Predicate 函数接口
同学你好,这里有一份你的未读代码,等你查收. 这篇文章属于 Java 8 教程(LTS)系列教程,点击阅读更多相关文章. Predicate 函数接口同之前介绍的 Function 接口一样,是一个函 ...
大数据学习（03）——HDFS的高可用
高可用架构图先上一张搜索来的图. 如上图,HDFS的高可用其实就是NameNode的高可用. 上一篇里,SecondaryNameNode是NameNode单节点部署才会有的角色,它只帮助NameN ...
IDEA输出乱码“淇℃伅”
尝试过在IDEA中tomcat的vmoptions中加入代码 -Dfile.encoding=GBK 没什么用最后找到了这个方法参考链接 ①在Tomcat文件夹下找到conf ②找到logging ...
IIS短文件名漏洞原理与挖掘思路
首先来几个网址先了解一下 https://www.jb51.net/article/166405.htm https://www.freebuf.com/articles/web/172561.htm ...
Java 线程安全的实现方法
概述在软件业发展的初期,程序编写都是以算法为核心的,程序员会把数据和过程分别作为独立的部分来考虑,数据代表问题空间中的客体, 程序代码则用于处理这些数据,这种思维方式直接站在计算机的角度去抽象问题和 ...
测试JUC安全类型的集合：CopyOnWriteArrayList
测试JUC安全类型的集合:CopyOnWriteArrayList 代码: package multithreading.TestSynchronized; import com.sun.xml.in ...
pom.xml中web.xml is missing and <failOnMissingWebXml> is set to true错误的解决
.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...

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

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

随机推荐

热门专题