富士山.png

由于項目重構(gòu)的時候有個input框需要調(diào)用后臺給的接口給出輸入建議 并且給到后端的并不是展示的value 而是ID
這個時候基于input框無法做到label方法...由此展開了一些探討和解決方案
有些小伙伴會說 那你為什么不用select呢? 因為可選項太多 如果不能手動輸入只能去選擇的化 太不人性化 而且效率低下

需要解決的痛點:

1.如何展示name 給后端id
2.用戶直接輸入正確的name 如何傳id
3.用戶直接輸入錯誤的name 如何解決
下面直接放解決方案

<el-form-item label="產(chǎn)品經(jīng)理:" >
     <el-autocomplete
     v-model="params.reqDtos.employeeOwnerTxt"
     :fetch-suggestions="nameSearch" //此處參考官方demo
     value-key="name" 
    @select="((item)=>{handleSelect(item, 'employeeOwner')})" 
   />
 </el-form-item>

這里主要說一下value-key這個屬性
好像在以前 必須要在原數(shù)據(jù)里有value 這個字段才會匹配到v-model 展示用 如今多了一個新的屬性以后可以直接映射到你需要的object.key 來展示綁定用

handleSelect方法如下

handleSelect(company, txt) {
        this.params.reqDtos[txt] = this.name.find(item => item.name === company.name).id
    },

這里通過name來找到后端給的數(shù)據(jù) 對應的id 賦值給params

等于說用兩條數(shù)據(jù)來存儲我們需要的狀態(tài)!

問題1.解決
問題2. 如果用戶直接輸入呢? 那我們在點擊按鈕提交前再做一次handleSelect的校驗.. 即可
問題3. 這里有2種方案 1 讓后端去匹配 2. 前端做form表單校驗

我們來看下問題3 前端限制的方案
通過el-form表單驗證 傳入rules

//規(guī)則定義在data中
    function isInArray(arr, value) {
      for (let i = 0; i < arr.length; i++) {
        if (value === arr[i].name) {
          return true
        }
      }
      return false
    }
    const validator1 = (rule, value, callback) => {
      if (!value)callback() //注1
      if (isInArray(this.city, value)) {
        callback()
      } else {
        callback(new Error('請選擇列表中已有選項'))
      }
    }

departureCityTxt: [
  { trigger: 'blur', validator: validator1 }
],

注1:當value傳入的時候 用戶第一次點擊下拉框的推薦項 value會是undefined 并且走異步也是一樣的 但是 @select 返回的值 v-model都是有值的 所以當value不存在的的時候 這里也調(diào)用callback認為校驗成功 (不是必填項) 原理是通過value 去比對后端給的list里是否有對應的值..