棋鬼王的博客

个人原创

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

现在大部分电商的网站、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,就是全国地址的数据信息,目录结构如下

        

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

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

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

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>

6.script标签里面的代码!!

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

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

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

例如:


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

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

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) {
            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.效果图


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

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

需要的话可自行下载哦!!1

    

    

    


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭