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 || []
    }
  }
}
上一篇下一篇

猜你喜欢

热点阅读