美文网首页
ant-design vue select 组件 请求一次接口后

ant-design vue select 组件 请求一次接口后

作者: Rose_yang | 来源:发表于2020-12-10 15:18 被阅读0次
 <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 || []
    }
  }
}

相关文章

网友评论

      本文标题:ant-design vue select 组件 请求一次接口后

      本文链接:https://www.haomeiwen.com/subject/xtftzctx.html