本人Vue小白,代码比较粗陋简单,欢迎指导。
以下源码基于element ui下拉框,对外输出为选择省、市的城市编码,提供重置的方法。
json文件查看另一篇文章:
https://blog.csdn.net/u013253924/article/details/84334144
<template>
<div class="province-city">
<el-form-item class="page-form-item" label="所属省:" prop="status" style="width: calc(50% - 20px)">
<el-select v-model="province" placeholder="请选择" @change="provinceChanged">
<el-option
:key="''"
:label="'全部'"
:value="''">
</el-option>
<el-option
v-for="item in provinces"
:key="item.code"
:label="item.name"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
<el-form-item class="page-form-item" label="市:" prop="status" style="width: calc(50% - 20px);margin-right: 0px">
<el-select v-model="city"
:loading="loadingCity"
@change="cityChanged"
placeholder="请选择">
<el-option
:key="''"
:label="'全部'"
:value="''">
</el-option>
<el-option
v-for="item in cities"
:key="item.code"
:label="item.name"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
</div>
</template>
<script type="text/javascript">
import provinceCity from '../../../static/json/provinceCity.json'
export default {
name: 'provinceCity',
props: {
provinceCode: {
type: String,
default: ''
},
cityCode: {
type: String,
default: ''
}
},
created() {
this.provinces = provinceCity.provinces
},
computed: {
},
mounted() {
this.province = this.provinceCode
this.provinceChanged(this.provinceCode)
this.city = this.cityCode
},
data() {
return {
loadingCity: false,
province: '',
city: '',
provinces: [],
cities: []
}
},
methods: {
provinceChanged(value) {
if (value !== '') {
this.loadingCity = true
for (var item of this.provinces) {
if (item.code === value) {
this.cities = item.cities
this.city = ''
this.loadingCity = false
break
} else {
continue
}
}
} else {
this.cities = []
this.city = ''
}
this.$emit('selectChange', this.province, this.city)
},
cityChanged(value) {
this.$emit('selectChange', this.province, this.city)
},
resetProviceCity(province, city) {
this.cities = []
if (province && city) {
this.province = province
this.provinceChanged(this.province)
this.city = city
} else {
this.province = ''
this.city = ''
}
}
}
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
</style>
使用:
import provincecity from '@/components/ProvinceCity'
components: { provincecity, },
<provincecity ref="addFormProvince" @selectChange="触发父方法,输出省、市城市编码"></provincecity>
重置选中:this.$refs.addFormProvince.resetProviceCity()