iview+vue 省市区三级联动

iview+vue 省市区三级联动

利用iview的下拉框实现三级联动功能
省市区的所有数据是一个json文件。类似于这种格式的，自己可以在项目里引入（需要可以留言）

话不多说上代码首先在data中定义初始化变量，我是为了方便将省市区的变量放到model对象里，然后定义addressOptions的数组接受省市区的所有数据，cityOptions是用来接受市的数组，countiesOptions是用来接收县或者区的数据，

model: {
        provinceName:'',//省
        cityName:'',//市
        countyName:'' ,//区
      },
      addressOptions:[],//城市三级联动数据
      cityOptions:[], //市
      countiesOptions:[],//县/区

下面展示template模块

<FormItem label="所在城市" required>
            <Row>
              <Col span="8">
                <Select
                  @on-change="optionsChangeProvince($event)"
                  v-model="model.provinceName"
                  placeholder="省"
                  clearable
                  style="width: 150px">
                  <Option
                    v-for="items in addressOptions"
                    :value="items.provinceName"
                    :key="items.provinceCode"
                    @click.native="optionsChangeProvince(items.provinceName)"
                    >{{ items.provinceName }}</Option>
                </Select>
              </Col>
              <Col span="8">
                <Select
                  v-model="model.cityName"
                  placeholder="市"
                  clearable
                  style="width: 150px"
                  @on-change="optionsChangeCity($event)">
                  <Option
                    v-for="o in cityOptions"
                    :value="o.cityName"
                    :key="o.cityCode"
                    @click.native="optionsChangeCity(o.cityName)"
                    >{{ o.cityName }}</Option>
                </Select>
              </Col>
              <Col span="8">
                <Select
                  @on-change="optionsChangeCounties($event)"
                    v-model="model.countyName"
                    placeholder="区/县"
                    clearable
                    style="width: 150px">
                    <Option
                      v-for="o in countiesOptions"
                      :value="o.countyName"
                      :key="o.countyCode"
                      @click.native="optionsChangeCounties(o.countyName)"
                      >{{ o.countyName }}</Option>
                  </Select>
              </Col>
            </Row>
          </FormItem>

//导入
import {address} from '@/libs/address';
//接收
mounted(){
    this.addressOptions = address
    console.log(this.addressOptions,'地址')
  },

//选取省份时的事件
optionsChangeProvince (e) {
      let _this = this
      let item
      _this.addressOptions.forEach((ele, i) => {
        if (ele.provinceName === e) { //将选取的省份到省份里去比对，有值则给到当前item
          item = ele
          console.log(item, '省item')
        }
        if (item) {
          this.cityOptions = item.cities // 将选中item的城市名称给cityOption
          this.model.countyName = ''  //这两步是用来当市区发生变化时置空县/区
          this.countiesOptions = []
        }
      })
    },
    //选取城市时的事件
    optionsChangeCity (e) {
      this.model.cityName = e
      console.log(this.model.cityName,'this.model.cityName')
      let _this = this
      let item
      if (!_this.cityOptions) {  //这一步是用来判断是否存在市区，否则不让其遍历
        return
      }
      _this.cityOptions.forEach((ele, i) => {
        if (ele.cityName === e) {
          item = ele
          console.log(item, '市item')
        }
        if (item) {
          this.countiesOptions = item.counties // 将选中item的矿机批次给batchNumList
          this.model.countyName = item.counties[0].countyName // 默认选择第一个区/县名称
          console.log(this.countiesOptions,'区')
          console.log(this.model.countyName,'this.model.countyName')
        }
      })
    },
    //选取县/区时的事件
    optionsChangeCounties (e) {
      console.log('输出', e)
    },

到这里基本上已经实现选取值并回显到下拉框中