详解Vue、element-ui、axios实现省市区三级联动


Posted in Javascript onMay 07, 2019

现在大部分电商的网站、app都需要用户或者管理者去选择设置地区等位置信息。下面我就介绍一下前端开发者用vue,axios,element-ui开发一个省市区三级联动的组件。

1.准备工作,首先我们需要全中国的省市区资源的json数据(科普一下:前六位数字是身份证前六位)

2.搭建vue-cli,安装axios,element-ui,创建vue,webpack项目

1).

在控制台或者终端执行以下代码,其中只需要路由(y),其他e2e,eslint这些不需要(y)

vue init webpack threelink

cd threelink

npm run dev

把没用的组件删除,重新创建组件

npm install axios --save ,安装axios

npm i element-ui -S(这是缩写) , 安装element-ui   

2).

在项目threelink->src->main.js里面添加,调用element-ui插件得代码

// 加载element_ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

 3).在static下创建json文件夹,文件夹里面放map.json,就是全国地址的数据信息,目录结构如下

详解Vue、element-ui、axios实现省市区三级联动

3.基本步骤都已经ok,下面我们开始写前端界面代码.

详解Vue、element-ui、axios实现省市区三级联动

上element-ui官网,找到选择器select,这里我们就不多说了,疯狂地复制粘贴,写css样式就行了。粘贴完修改完之后的样子就是这个样子了,

详解Vue、element-ui、axios实现省市区三级联动

别着急,一会开始上代码!

4.首先我们要知道,当我们选择之后数据才会变化的,所以要给select绑定change事件。

我们仔细阅读了element-ui的select文档之后发现,v-model的值为当前被选中的el-option的 value 属性值。

5.template组件里面的代码!!!

<div class="linkage">
  <el-select
   v-model="sheng"
   @change="choseProvince"//这个change事件是select的,不是option的,别写在option里面
   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>

script标签里面的代码!!

这里主要的难点就是,找到json数据的特点!

像直辖市这些没有市区的,默认省份=市区,例如:省份:天津。城市:天津。区县:。。/

我们可以找到数据之间的规律自己手动增加数据信息,如果要返回给后端,那么就拿出来他的前面的位置参数,或者是后面的未知参数!!

例如:

详解Vue、element-ui、axios实现省市区三级联动

按正常来讲,是没有红色圈出来的那个参数的,这是我按照正确的规律手动后添加的!!!为了满足直辖市而添加

一定要记得手动添加的数据是无效的!!这个只是为了自己编码方便才添加的!手动添加的那条数据,不要返给后端,要找到它前面的数据,找到真实数据!

import axios from 'axios'
export default {
 data () {
  return {
   mapJson:'../static/json/map.json',
   province:'',
   sheng: '',
   shi: '',
   shi1: [],
   qu: '',
   qu1: [],
   city:'',
   block:'',
  }
 },
 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
      // console.log(this.E)
     }
    }
   },
   // 选区
   choseBlock:function(e) {
    this.E=e;
    // console.log(this.E)
   },
  },
  created:function(){
   this.getCityData()
  }
}

7.效果图

 详解Vue、element-ui、axios实现省市区三级联动

详解Vue、element-ui、axios实现省市区三级联动

8.OK我个人感觉效果还不错,也不卡

github项目地址:https://github.com/LLJJTT/threelink 

以上所述是小编给大家介绍的Vue、element-ui、axios实现省市区三级联动详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
webpack结合express实现自动刷新的方法
May 07 #Javascript
记录一次开发微信网页分享的步骤
May 07 #Javascript
Vue 幸运大转盘实现思路详解
May 06 #Javascript
Vue运用transition实现过渡动画
May 06 #Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 #Javascript
vue路由跳转传参数的方法
May 06 #Javascript
如何获取vue单文件自身源码路径
May 06 #Javascript
You might like
php下使用无限生命期Session的方法
2007/03/16 PHP
PHP define函数的使用说明
2008/08/27 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP最常用的正则表达式
2017/02/13 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
php和asp语法上的区别总结
2019/05/12 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
javascript实现评分功能
2020/06/24 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
安全事故检讨书
2014/01/18 职场文书
心理健康教育制度
2014/01/27 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
合同纠纷调解书
2015/05/20 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
如何基于python实现单目三维重建详解
2022/06/25 Python