详解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  Error 对象 错误处理
May 18 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
js模块加载方式浅析
Aug 12 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
element跨分页操作选择详解
Jun 29 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php中__toString()方法用法示例
2016/12/07 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
python实现人人网登录示例分享
2014/01/19 Python
基于Python实现文件大小输出
2016/01/11 Python
Python操作csv文件实例详解
2017/07/31 Python
Sanic框架应用部署方法详解
2018/07/18 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
大学生毕业自我评价范文分享
2013/11/11 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
公司副总经理任命书
2014/06/05 职场文书
城市创卫标语
2014/06/17 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
python删除csv文件的行列
2021/04/06 Python
python Django框架快速入门教程(后台管理)
2021/07/21 Python
分享3个非常实用的 Python 模块
2022/03/03 Python