1. 程式人生 > 其它 >antdesign select可輸入可選擇

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