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

随机推荐

Java的三种日期工具 Date Calendar SimpleDateFormat
三种日期工具配合下面的案例可以更加深度的了解 Date 需要导包java.util.Date Date d = new Date(); //两种都是获取到现在时间的时间戳 long t1 = d.g ...
unittest系统（八）一文搞定unittest重试功能
在前面的介绍中,我们对unittest进行了分享介绍,那么在实际的应用中,因为客观原因需要对失败,错误的测试用例进行重试,所以呢,现有的unittest的框架无法满足,那么我们可以去改造下是否能够满足 ...
使用vue实现用户管理添加及删除功能
简单的管理系统-增删改查添加及删除功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
SpringCloud升级之路2020.0.x版-13.UnderTow 核心配置
本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford Undertow ...
SpringMVC学习02（我的第一个SpringMVC程序）
2.Hello,SpringMVC 2.1 配置版 1.新建一个Moudle , springmvc-02-hello , 添加web的支持! 2.确定导入了SpringMVC 的依赖! 3.配置we ...
【笔记】简谈L1正则项L2正则和弹性网络
L1,L2,以及弹性网络前情提要: 模型泛化与岭回归与LASSO 正则 ridge和lasso的后面添加的式子的格式上其实和MSE,MAE,以及欧拉距离和曼哈顿距离是非常像的虽然应用场景不同,但是 ...
计算机网络：基于iptalbes的SANT和DNAT|docker的服务器发布项目--超详细一看就会
项目说明: 模拟企业让内网服务器可以上网,同时发布内网的服务器 1.实验环我们需要准备三台linux系统,一台作为路由器机route,其它为客户机client-1.client-2 主机改名 ho ...
NPM使用方法
什么是npm npm是nodejs的包管理器,在当今工程化前端开发过程中,npm包起着举足轻重的作用. 安装npm 作为nodejs的包管理器,npm随着nodejs一起安装的.通常情况下,当我们安装 ...
RocketMQ可视化控制台
中午文档 https://github.com/apache/rocketmq-externals/blob/master/rocketmq-console/doc/1_0_0/UserGuide_C ...
docker配置cdn-容器内可以通过域名访问
添加docker的cdn配置 # 没有这个文件创建 vim /etc/docker/daemon.json 添加内容如下 { "dns":["8.8.8.8", ...

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

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

随机推荐

热门专题