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

随机推荐

大数据开发-Go-新手常遇问题
真正在工作中用Go的时间不久,所以也作为新手,总结了一些常见的问题和坑 Go 中指针使用注意点 // 1.空指针反向引用不合法 package main func main() { var p *in ...
OI卷题记录
2021.8.2 LG3386 匈牙利算法二分图 LG1377 笛卡尔树题解 2021.8.3 LG2962 $\text{Meet in middle}$ LG3389 高斯消元高斯-约旦 ...
给每个li延时添加样式动画效果(setInterval,clearInterval)
btnsAnime($('ul li')) function btnsAnime(pagesl) { var that = this $(pagesl).hide() let i = 0; funct ...
小白自学vue的第一天，加油！
一.插值的操作 1.Mustache语法也就是双大括号(翻译过来就是胡须的意思) 2.v-once指令加了v-once数据不会随着数据的改变而改变,只会渲染一次 3.v-html指令可以解析HT ...
优化SQL 查询性能
为什么查询会很慢如果把查询看作是一个任务,那么它由一系列子任务组成,每个子任务都会消耗一定的时间.要优化查询,实际上是要优化其子任务,要么消除其中一些子任务,要么减少子任务的执行次数,要么让子任务运 ...
腾讯云TDSQL PostgreSQL版 -最佳实践｜优化 SQL 语句
查看是否为分布键查询 postgres=# explain select * from tbase_1 where f1=1; QUERY PLAN ------------------------- ...
基于AOP和HashMap原理学习，开发Mysql分库分表路由组件！
作者:小傅哥博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言什么?Java 面试就像造火箭单纯了! 以前我也一直想 Java 面试就好好面试呗 ...
centos7.5 安装jdk环境
最新下载地址历史下载地址 [root@manage ~]# mkdir /application/ [root@manage ~]# tar -xf jdk-8u112-linux-x64.gz - ...
《JERRY Hexo & GitHub 静态网站搭建说明》
JERRY-Hexo-GitHub <JERRY Hexo & GitHub 静态网站搭建说明> 原创内容,转载请注明出处! 一.前言 1.1 什么是 Hexo? 一个基于 Nod ...
如何制作图标字体（如何将svg转换为css可用的图标字体）
转自: 如何制作图标字体(如何将svg转换为css可用的图标字体) 具体描述在项目开发当中,我们常常遇到需要将获取到的svg转换为,css可用的图标字体,那么具体该如何进行操作呢具体操作登录ic ...

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

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

随机推荐

热门专题