element-ui 实现三个选择框省市区的联级查询

element-ui 实现三个选择框省市区的联级查询

1、前言

在开发的项目中我们肯定会碰到要我们填写省市区的信息，一般都是自己选择的，不会说让我们自己输入，因为自己输入就会让我们的项目感觉上有点像小demo一样，那么我们究竟该怎么去是实现这个功能呢？翻阅借鉴许多博主的优秀博文，那么我总结出一些做这个的套路。

首先引入地区数据

dispicker.js 如下

(function (factory) {

  if (typeof define === 'function' && define.amd) {

    // AMD. Register as anonymous module.

    define('ChineseDistricts', [], factory);

  } else {

    // Browser globals.

    factory();

  }

})(function () {

  var ChineseDistricts =
    [
    //这里就填写省份数据，这个可以从百度去搜索中国省市区的数据写进去，必须是json格式！！！
    ]

接着在页面引入使用

import { distPicker } from '../ChinaArea/distpicker'

还需要把我们刚刚写的js文件导入到这个界面，好这个就涉及到怎么把别的包下的js文件导入到所需要的页面中去了！！

  //引入别的包的js文件
    methods1: function() {
      distPicker()
    },

接着我们就可以开始使用了！！！

在vue中使用

<template>
 <el-form :model="hospital">

        <el-form-item label="医院所在省" prop="hsptProvince" label-width="130px">
          <el-select
            v-model="hospital.hsptProvince"
            @change="choseProvince"
            clearable
            placeholder="请选择省级地区">
            <el-option v-for="(item,$index) in province" :key="$index" :label="item.value" :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>

        <el-form-item label="医院所在市" prop="hsptCity" label-width="130px">

          <el-select
            v-model="hospital.hsptCity"
            @change="choseCity"
            clearable
            placeholder="请选择市级地区">
            <el-option v-for="(item,$index) in city" :key="$index" :label="item.value" :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="医院所在区(县)" prop="hsptCountry" label-width="130px">
          <el-select
            v-model="hospital.hsptCountry"
            @change="choseBlock"
            clearable
            placeholder="请选择区(县)级地区">
            <el-option v-for="(item,$index) in block" :key="$index" :label="item.value" :value="item.value">
            </el-option>
          </el-select>

        </el-form-item>
</el-form>
</template>

<script>
export default {
  data(){
	return:{
	// 三级选择省市区
      ChineseDistricts: ChineseDistricts,
      province: [],
      shi1: [],
      qu1: [],
      city: [],
      block: [],
	}
	},
	methods:{
	 // 加载china地点数据，三级

    getCityData: function() {
      let that = this
      that.ChineseDistricts.forEach(function(item, index) {
        //省级数据
        that.province.push({ id: item.code, value: item.name, children: item.cityList })
      })
    },

    // 选省
    choseProvince: function(e) {
      let that = this
      that.city = []
      that.block = []
      that.hospital.hsptCity = ''
      that.hospital.hsptCountry = ''

      for (var index2 in that.province) {
        if (e === that.province[index2].id) {
          that.shi1 = that.province[index2].children
          that.hospital.hsptProvince = that.province[index2].value
          that.shi1.forEach(function(citem, cindex) {
            that.city.push({ id: citem.code, value: citem.name, children: citem.areaList })
          })
        }
      }

      console.log(that.hospital.hsptProvince)

    },

    // 选市
    choseCity: function(e) {
      let that = this
      that.block = []
      for (var index3 in that.city) {
        if (e === that.city[index3].id) {
          that.qu1 = that.city[index3].children
          that.hospital.hsptCity = that.city[index3].value
          that.E = that.qu1[0].id
          that.qu1.forEach(function(bitem, bindex) {
            that.block.push({ id: bitem.code, value: bitem.name, children: [] })
          })
        }
      }

      console.log(that.hospital.hsptCity)

    },

    // 选区

    choseBlock: function(e) {
      this.hospital.hsptCountry = e
      console.log(this.hospital.hsptCountry)
    }

	}
	}
</script>

配置到这差不多就OK了，一起看看成果！！

结果

搞定结束下班！