vue省市区 下拉框实现

vue省市区 下拉框实现

1.效果如图

选中省之后，再选择对应的市，再选择对应的区

数据源js文件：

码云：https://gitee.com/wyjpositive/mybatis-plus-demo/tree/master/src/main/resources/static

我是把里面的json文件改成js引入对应的项目的中

上代码：

①：引入省市区js

import jsonData from '@/assets/js/china_address.js'

②：编写省市区的下拉框

 <el-form-item label="所在地区">
               <el-select v-model="valueProvince"
               placeholder="请选择省"
               @change="changeProvince"
               style="width:120px">
                <el-option
                  v-for="item in provinceList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="valueCity"
                        placeholder="请选择市"
                        @change="changeCity"
                        style="width:120px">
                <el-option
                  v-for="item in cityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-select v-model="valueOrigin"
                        placeholder="请选择区"
                        @change="changeOrigin" style="width:120px">
                <el-option
                  v-for="item in originOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
        </el-form-item>

③：定义下拉框所需要数据

export default {
  components: {
    UploadImage
  },
  data() {
    return {
      provinceList: [], // 省列表
      cityList: [], // 市列表
      originList: [], // 区列表
      valueProvince: '', // 所选的省
      valueCity: '', // 所选的市
      valueOrigin: '', // 所选的区
      cityOptions: [], // 市下拉框数据
      originOptions: [],// 区下拉框数据
      }
    },
 }

④：编写js

  created() {
    this.getList()
    this._getJsonData()
    //console.log('jsonData:',jsonData)
  },
  methods: {

      // 选择省
    changeProvince(val) {
      this.provinceList.forEach((province, index) => {debugger
        if (val.toString() === this.provinceList[index].value) {
           this.cityOptions = this.provinceList[index].children
           this.valueCity = ''
           this.originOptions = this.provinceList[index].children[0].children
           this.valueCity = ''
           this.valueOrigin = ''
           // 如果选中省之后想市区默认选中
          // this.valueCity = this.provinceList[index].children[0].value
          // this.valueOrigin = this.provinceList[index].children[0].children[0].value
        }
      })
    },
    // 选择市
    changeCity(val) {
      this.cityList.forEach((city, index) => {
        if (val.toString() === this.cityList[index].value) {
          this.originOptions = this.cityList[index].children
          this.valueOrigin = ''
          //如果选中市之后默认区选中
          // this.valueOrigin = this.cityList[index].children[0].value
        }
      })
    },
    // 选择区
    changeOrigin(val) {
      this.valueOrigin = val
    },
    // 初始化省市区数据
    _getJsonData() {
        console.log('res =======>'+jsonData)
        this.provinceList = []
        this.cityList = []
        this.originList = []
        jsonData.data.forEach((item) => {
          if (item.value.match(/0000$/)) {
            this.provinceList.push({
              value: item.value,
              label: item.name,
              children: []
            })
          } else if (item.value.match(/00$/)) {
            this.cityList.push({
              value: item.value,
              label: item.name,
              children: []
            })
          } else {
            this.originList.push({
              value: item.value,
              label: item.name
            })
          }
        })
        for (let index in this.provinceList) {
          for (let index1 in this.cityList) {
            if (this.provinceList[index].value.slice(0, 2) === this.cityList[index1].value.slice(0, 2)) {
              this.provinceList[index].children.push(this.cityList[index1])
            }
          }
        }
        for(let item1 in this.cityList) {
          for(let item2 in this.originList) {
            if (this.originList[item2].value.slice(0, 4) === this.cityList[item1].value.slice(0, 4)) {
              this.cityList[item1].children.push(this.originList[item2])
            }
          }
        }
    },

  },

地址的js中有部分不是简称。比如广西壮族自治区指广西省，有需要的自行修改