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

随机推荐

solr（CVE-2019-0193）远程命令执行
影响版本 Apache Solr < 8.2.0 并且开启了DataImportHandler模块(默认情况下该模块不被启用) 安装重启daoker 更新配置文件 systemctl dae ...
yum 卸载
# yum list installed | grep [软件名] #yum -y remove [软件名]
利用 cgroup 的 cpuset 控制器限制进程的 CPU 使用
最近在做一些性能测试的事情,首要前提是控制住 CPU 的使用量.最直观的方法无疑是安装 Docker,在每个配置了参数的容器里运行基准程序. 对于计算密集型任务,在只限制 CPU 的需求下,直接用 L ...
IOS真机调试找不到设备:ERROR: Could not connect to lockdownd, error code -[x]
报错信息: Could not connect to lockdownd, error code -3 解决方法:修改var/db/lockdown文件夹的读写权限在终端找到文件夹cd var/db ...
浅谈vue响应式原理及发布订阅模式和观察者模式
一.Vue响应式原理首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...
剑指 Offer 30. 包含min函数的栈
剑指 Offer 30. 包含min函数的栈定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的 min 函数在该栈中,调用 min.push 及 pop 的时间复杂度都是 O(1). 示例 ...
树莓派压力测试工具S-Tui + Stress的使用
压力测试工具S-Tui + Stress的使用树莓派# 背景故事打算测试一下树莓派外壳的散热性能,需要能压满CPU100%,同时显示温度.CPU频率.CPU占用率,那么这款工具你值得拥有. 软件介 ...
Linux之cat tail less常见用法
1.cat 通常查找出错误日志 cat error.log | grep 'foo' , 这时候我们还有个需求就是输出当前这个日志的前后几行: cat error.log | grep -C 10 ' ...
Java TreeMap 和 LinkedHashMap【笔记】
Java TreeMap 和 LinkedHashMap[笔记] TreeMap TreeMap基本结构 TreeMap 底层的数据结构就是红黑树,和 HashMap 的红黑树结构一样与HashMa ...
Python - pydantic 入门介绍与 Models 的简单使用
前言为啥要学这个,因为 FastAPI 是基于它进行开发的,而且是个不错的框架,所以有必要深入学习前置学习 Python 类型提示:https://www.cnblogs.com/poloyy/p ...

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

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

随机推荐

热门专题