<el-row>
<el-col
:span="span">
<el-select
size="small"
v-model="provinceCode"
@focus="getProvinces"
@change="changeProvince"
:placeholder="$t('省')"
filterable>
<el-option
v-for="item in provinceList"
:key="item.provinceCode"
:label="item.provinceName"
:value="item.provinceCode">
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity">
<el-select
size="small"
v-model="cityCode"
@focus="getCities"
@change="changeCity"
:placeholder="$t('市')"
filterable>
<el-option
v-for="item in cityList"
:key="item.cityCode"
:label="item.cityName"
:value="item.cityCode">
</el-option>
</el-select>
</el-col>
<el-col
:span="span"
v-if="!hideCity && !hideArea">
<el-select
size="small"
v-model="areaCode"
@focus="getAreas"
@change="changeArea"
:placeholder="$t('区/县')"
filterable>
<el-option
v-for="item in areaList"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode">
</el-option>
</el-select>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: 'addressHorizontalSelect',
components: {},
props: {
hideCity: { // 隐藏市
type: Boolean,
default: false
},
hideArea: { // 隐藏区/县
type: Boolean,
default: false
},
addressCode: null // 地址编码
},
model: {
prop: 'addressCode',
event: 'addressSelect'
},
data() {
return {
provinceList: [], // 省份列表
cityList: [], // 城市列表
areaList: [], // 区/县列表
provinceCode: '', // 省份编码
cityCode: '', // 城市编码
areaCode: '', // 区/县编码
cityFlag: false, // 避免重复请求的标志
provinceFlag: false,
areaFlag: false
}
},
computed: {
span () {
if (this.hideCity) {
return 24
}
if (this.hideArea) {
return 12
}
return 8
}
},
watch: {
},
created () {
this.getProvinces()
},
methods: {
/**
* 获取数据
* @param {Array} array 列表
* @param {String} url 请求url
* @param {String} code 编码(上一级编码)
*/
fetchData (array, url, code) {
this.$http({
method: 'get',
url: url + '/' + code
})
.then(res => {
