ant-design vue select 组件 请求一次接口后
2020-12-10 本文已影响0人
Rose_yang
<a-row>
<a-col :span="8" :offset="6">
<a-form-item
label='省'
>
<a-select
showSearch
optionFilterProp="children"
:filterOption="filterOption"
v-decorator="['provinceId',{rules: [{ required: true, message: '请选择省' }]}]"
:getPopupContainer="(trigger) => {return trigger.parentElement}"
placeholder='请选择省'
@change="handleProvinceChange"
>
<a-select-option
v-for="(item, index) in provinceList"
:key="index"
:value="item.provinceId"
>{{item.provinceName}}</a-select-option>
</a-select>
</a-form-item>
</a-col>
</a-row>
import debounce from 'lodash/debounce'
export default {
data() {
return {
provinceList: []
}
},
methods: {
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
async handleProvinceChange (value) {
let cityData = await getCityList({
provinceId: value
}) || {}
this.cityList = cityData.data || []
}
}
}