<el-form-item label="邮政编码" prop="zipCode">
<el-select
v-model="form.zipCode"
remote
clearable
filterable
reserve-keyword
:remote-method="remoteMethod"
placeholder="请选择"
default-first-option
@change="zipCodeChange"
>
<el-option
v-for="item in candidates"
:key="item.value"
:label="item.countryCode + ' ' + item.state + ' ' + item.city + ' ' + item.zipCode"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
return:{
form: {
countryCode: '',
zipCode: '',
province: '',
city: '',
address: '',
address2: '',
contacts: '',
phone: '',
company: ''
},
candidates: [],
findItemCode: ''
}
methods:{
remoteMethod (query) {
if (!query || !this.form.countryCode) return (this.candidates = [])
setTimeout(async () => {
const res = await this.$request({
url: `/deliverAddress/candidate?zipcode=` + query + '&countryCode=' + this.form.countryCode,
method: 'get'
})
this.candidates = res.data
}, 1500)
},
zipCodeChange (e) {
if (!e) return
let findItem = this.candidates.find((item) => item.id === e)
if (!findItem) return this.$message.warning('发生未知错误,请重新选择!')
this.findItemCode = findItem
this.form.province = findItem.state
this.form.city = findItem.city
}
}
el-select 远程搜索 实战 使用
最新推荐文章于 2024-06-17 11:08:25 发布