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: '',
    }
  },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM