省市区组件
<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>