<template>
<div class="addSelect">
<el-select
placeholder="請選擇省"
style="width:33%;"
v-model="modelFiled.province"
clearable
filterable
@change="getAddrData($event,'province')"
ref="province"
>
<el-option
v-for="(item,index) in addrList.province"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-select
ref="city"
placeholder="請選擇市"
style="width:33%;"
@change="getAddrData($event,'city')"
v-model="modelFiled.city"
clearable
filterable
>
<el-option
v-for="(item,index) in addrList.city"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-select
ref="area"
placeholder="請選擇區/縣"
style="width:33%;"
v-model="modelFiled.area"
clearable
filterable
@change="getAddrData($event,'area')"
>
<el-option
v-for="(item,index) in addrList.area"
:key="index"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</div>
</template>
<script>
// import { addrData } from './addrData.js' // 本地數據json
import { queryCityByLevel } from '@/api/common' //遠程數據接口
export default {
data () {
return {
modelFiled: {
province: '',
provinceName: '',
city: '',
cityName: '',
area: '',
areaName: ''
},
addrList: {
province: [],
city: [],
area: []
},
keyObj:{
1:'province',
2:'city',
3:'area',
}
}
},
mounted () {
this.getAddrData()
},
methods: {
// 用於獲取省市縣
async getAddrData (parentid, key) {
// level:1是獲取省,2是獲取市,3是獲取縣
let level = 1
// === 聯動數據初始化start ===
if (key === 'province') {
this.addrList.city = []
this.modelFiled.city = ''
this.modelFiled.provinceName = '' // 防止是點擊clear
// this.$forceUpdate()
level = 2
}
if (key === 'city') {
level = 3
}
if (key !== 'area') {
this.modelFiled.cityName = ''
// 不是縣/區改變,都清空縣的值,
this.modelFiled.area = ''
this.addrList.area = []
}
this.modelFiled.areaName = ''
// === 聯動數據初始化end ===
if (parentid) {
this.modelFiled[key + 'Name'] = this.$refs[key].getOption(parentid).$options.propsData.label
}
this.$emit('addrChange', this.modelFiled)
// 如果是縣改變或者是點了清空都不請求數據
if (key === 'area' || parentid === '')
return
// 獲取下拉框數據
const { data } = await queryCityByLevel(level, parentid)
if (data.status === 0) {
this.addrList[this.keyObj[level]] = data.data
}
},
}
}
</script>
<style lang="scss" scoped>
.addSelect {
display: flex;
}
</style>
省市區三級聯動,史上最牛逼,基於element ,帶註釋
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.