vue 选择省市县

引入下载

 npm install area-data --save

页面引入

import { pcaa } from 'area-data'

页面使用

 <el-form-item label="省" prop="province">
              <el-select v-model="form.province" placeholder="请选择省" style="width: 190px"
                         @change="seletekey($event, 'province')">
                <el-option
                  v-for="(val, key) in proviceList"
                  :key="val"
                  :label="val"
                  :value="val"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="市" prop="city">
              <el-select v-model="form.city" placeholder="请选择市" style="width: 190px"
                         @change="seletekey($event, 'city')">
                <el-option
                  v-for="(val, key) in cityList"
                  :key="val"
                  :label="val"
                  :value="val"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="县" prop="county">
              <el-select v-model="form.county" placeholder="请选择县" style="width: 190px"
                         @change="seletekey($event, 'area')">
                <el-option
                  v-for="(val, key) in countyList"
                  :key="val"
                  :label="val"
                  :value="val"
                ></el-option>
              </el-select>
            </el-form-item>

data定义 

  proviceList: pcaa['86'], //  获取所有的省
      pcaaData: pcaa,
      cityList: [],
      countyList: [],

方法

 seletekey(e, type) {
      if (e) {
        switch (type) {
          case 'province':
            Object.keys(this.proviceList).filter(item => {
              if (this.proviceList[item] === e) {
                this.cityList = this.pcaaData[item]
              }
            })
            break
          case 'city':
            Object.keys(this.cityList).filter(item => {
              if (this.cityList[item] === e) {
                this.countyList = this.pcaaData[item]
              }
            })
            break
          case 'area':
            break
        }
      }
    },