antdesign select可输入可选择

  <a-form-item label="订单号">
              <a-select
                :disabled="model && model.confirmOrder"
                show-search
                v-decorator="['orderNo']"
                placeholder="请输入订单号"
                :default-active-first-option="false"
                :show-arrow="false"
                :filter-option="false"
                :not-found-content="null"
                @search="handleSearch"
                @blur="handleBlur"
                @change="handleChange"
              >
                <a-select-option v-for="item in selectData" :key="item.orderNo">
                  {{ item.orderNo }}
                </a-select-option>
              </a-select>
            </a-form-item>
//订单下拉列表
    handleSearch (val) {
      if (val != '') {
        const requestParameters = {
          OrderNo: val,
        }
        orderSelect(requestParameters).then((res) => {
          this.selectData = res
          this.selectValue = val
        })
      }
    },
    //选择下拉列表
    handleChange (val) {
      this.selectValue = val
      let newData = this.selectData.filter(item => item.orderNo == val);
      if (newData.length > 0) {
        this.form.setFieldsValue({
          orderNo: newData[0].orderNo,
          orderDate: moment(newData[0].orderDate).format('YYYY-MM-DD'),
          orderShipDate: moment(newData[0].orderShipDate).format('YYYY-MM-DD'),
        })
      }
      else {
        this.form.setFieldsValue({
          orderNo: this.selectValue,
        })
      }
    },
    //失去焦点
    handleBlur () {
      this.handleChange(this.selectValue)
    },
data () {
    return {
      selectData: {},
      selectValue: '',
    }
  },

 

上一篇:windows离线安装node-gyp


下一篇:AntDesign of React 之 rowkey 问题