选择省市区的组件

省市区组件

<template>
  <section style="display: inline-block;">
    <el-form-item :label="provinceLabel" :label-width="labelWidth">
      <el-select  v-model="c_provinceId"
                  placeholder="请选择省份"
                  clearable
                  :style="` ${width}px`">
        <el-option  v-for="(item, index) in c_provinceList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                    @click.native="selectProvince(item)">
          {{item.name}}
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="cityLabel" :label-width="labelWidth">
      <el-select  v-model="c_cityId"
                  placeholder="请选择城市"
                  clearable
                  :disabled="!c_province"
                  :style="` ${width}px`">
        <el-option  v-for="(item, index) in c_cityList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                    @click.native="selectCity(item)">
          {{item.name}}
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="districtLabel" :label-width="labelWidth">
      <el-select  v-model="c_districtId"
                  placeholder="请选择城市"
                  clearable
                  :disabled="!c_city"
                  :style="` ${width}px`">
        <el-option  v-for="(item, index) in c_districtList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                    @click.native="selectDistrict(item)">
          {{item.name}}
        </el-option>
      </el-select>
    </el-form-item>
  </section>
</template>

<script>
  import Fetch from '@/api/intention'
  export default {
    name: 'citySelector',
    props: {
      province: [String],
      provinceId: [String],
      provinceLabel: {
        type: String,
        default: '所在省份'
      },
      city: [String],
      cityId: [String],
      cityLabel: {
        type: String,
        default: '所在城市'
      },
      district: [String],
      districtId: [String],
      districtLabel: {
        type: String,
        default: '所在地区'
      },
      showCity: {
        type: Boolean,
        default: true
      },
      showDistrict: {
        type: Boolean,
        default: true
      },
       {
        type: String,
        default: '140'
      },
      labelWidth: [String]
    },
    data () {
      return {
        c_province: '',
        c_provinceId: '',
        c_provinceList: [],

        c_city: '',
        c_cityId: '',
        c_cityList: [],

        c_district: '',
        c_districtId: '',
        c_districtList: [],
      }
    },
    created () {
      this.getProvinceList()
    },
    watch: {
      'province' (val) {
        if (!val) {
          this.selectProvince()
        }
      },
      'city' (val) {
        if (!val) {
          this.selectCity()
        }
      },
      'district' (val) {
        if (!val) {
          this.selectDistrict()
        }
      },
      'c_provinceId' (val) {
        if (!val) {
          this.c_province = ''
          this.c_city = ''
          this.c_cityId = ''
          this.c_cityList = []
          this.c_district = ''
          this.c_districtId = ''
          this.c_districtList = []
        }
      },
      'c_cityId' (val) {
        if (!val) {
          this.c_city = ''
          this.c_district = ''
          this.c_districtId = ''
          this.c_districtList = []
        }
      },
      'c_districtId' (val) {
        if (!val) {
          this.c_district = ''
        }
      }
    },
    methods: {
      getProvinceList () {
        let provinceList = []
        provinceList = JSON.parse(window.localStorage.getItem('map-city-list'))
        if (provinceList) {
          this.c_provinceList = provinceList
          return this.refreshData()
        }
        Fetch.getProvinceList().then(res => {
          if (res.status === 200) {
            this.c_provinceList = res.data.data
            this.refreshData()
            window.localStorage.setItem('map-city-list', JSON.stringify(this.c_provinceList))
          } else {
            this.$message.warning(res.data.message)            
          }
        }).catch(err => {
          this.$message.error('服务器错误，获取省市区失败')
        })
      },

      selectProvince (item) {
        if (!item) return this.setProvince()
        let name = item.name
        let id = item.id
        this.setProvince(name, id)
        this.c_cityList = item.cities
        this.setCity()
        this.c_districtList = []
        this.setDistrict()
      },

      selectCity (item) {
        if (!item) return this.setCity()
        let name = item.name
        let id = item.id
        this.setCity(name, id)
        this.c_districtList = item.counties
        this.setDistrict()
      },

      selectDistrict (item) {
        if (!item) return this.setDistrict()
        let name = item.name
        let id = item.id
        this.setDistrict(name, id)
      },

      refreshData () {
        // this.initData()
        if (this.province) {
          let provinceTarget = this.c_provinceList.filter(province => province.name.includes(this.province))[0]
          if (!provinceTarget) return
          console.log('provinceTarget', provinceTarget)
          this.c_province = this.province
          this.c_provinceId = provinceTarget.id
          this.c_cityList = provinceTarget.cities
          if (this.city) {
            let cityTarget = this.c_cityList.filter(city => city.name.includes(this.city))[0]
            if (!cityTarget) return
            console.log('cityTarget', cityTarget)
            this.c_city = this.city
            this.c_cityId = cityTarget.id
            this.c_districtList = cityTarget.counties
            if (this.district) {
              let districtTarget = this.c_districtList.filter(district => district.name.includes(this.district))[0]
              if (!districtTarget) return
              console.log('districtTarget', districtTarget)
              this.c_district = this.district
              this.c_districtId = districtTarget.id
            }
          }
        } else if (this.provinceId) {
          let provinceTarget = this.c_provinceList.filter(province => province.id == this.provinceId)[0]
          this.setProvince(provinceTarget.name, this.provinceId)
          this.c_cityList = provinceTarget.cities
          if (this.cityId) {
            let cityTarget = this.c_cityList.filter(city => city.id == this.cityId)[0]
            this.setCity(cityTarget.name, this.cityId)
            this.c_districtList = cityTarget.counties
            this.setDistrict(this.district, this.districtId)
          }
        }
      },

      initData () {
        this.c_province = this.province
        this.c_provinceId = this.provinceId
        this.c_city = this.city
        this.c_cityId = this.cityId
        this.c_district = this.district
        this.c_districtId = this.districtId
        this.c_cityList = []
        this.c_districtList = []
      },

      setProvince (name = '', id = '') {
        this.c_province = name
        this.c_provinceId = id
        this.$emit('update:province', name)
        this.$emit('update:provinceId', id)
      },

      setCity (name = '', id = '') {
        this.c_city = name
        this.c_cityId = id
        this.$emit('update:city', name)
        this.$emit('update:cityId', id)
      },

      setDistrict (name = '', id = '') {
        this.c_district = name
        this.c_districtId = id
        this.$emit('update:district', name)
        this.$emit('update:districtId', id)
      }
    }
  }
</script>

页面中引入组件

import cityFormItem from '../components/citySelector'
components: {
  cityFormItem
},
data:{
    return {
        areaData: {
        province: '',
        city: '',
        district: ''
      },
    }
}

在template里面渲染

    <cityFormItem
        width="150"
        label-width="100px"
        provinceLabel="用户所在省份"
        cityLabel="用户所在城市"
        districtLabel="用户所在地区"
        :province.sync="areaData.province"
        :city.sync="areaData.city"
        :district.sync="areaData.district">
      </cityFormItem>