美文网首页
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