記錄代碼

vue代碼

<el-input
 class="input"
  v-model="inputVal"
  :disabled="!itemData.editable"
  placeholder=" "
  @change="inputValChange"
></el-input>
<!--inputVal 改爲 selectVal-->
<el-select
  class="select"
  v-model="selectVal"
  placeholder=" "
  @change="selectValChange"
>
  <el-option
    v-for="item in itemData.array"
    :key="item.code"
    :label="item.name"
    :value="item.code"
  ></el-option>
</el-select>

input的值發生改變時

inputValChange(val) {
 //如果val匹配到下拉數據，同步select
  //如果val沒有匹配到下拉數據，select的值清空
  let findData = this.itemData.array.find(item=>{
    return item.code === val;
  })
  if(findData) {
    this.selectVal = val;
  }else {
    this.selectVal = "";
  }
}

//select框選擇之後，同步輸入框inputVal

selectValChange(val) {
  this.inputVal = val;
},

//處理鍵盤下拉數據回顯時

selectValEvent(val) {
  let findData = this.itemData.array && this.itemData.array.find(item=>{
    return val === item.code;
  })
  let returnValue = "";
  if(findData) {
    returnValue = val;
  }
  return returnValue;
}

//監聽itemData.value

"itemData.value"(val){
  //當選擇變量時val無匹配到的下拉數據，就置空
  let findData = this.itemData.array.find(item=>{
    return item.code === val;
  })
  if(findData) {
    //這種情況不存在，變量爲{}格式
    this.selectVal = val;
  }else {
    this.selectVal = "";
  }
},