el-autocomplete开发遇到的一些问题

富士山.png

由于项目重构的时候有个input框需要调用后台给的接口给出输入建议 并且给到后端的并不是展示的value 而是ID
这个时候基于input框无法做到label方法...由此展开了一些探讨和解决方案
有些小伙伴会说 那你为什么不用select呢? 因为可选项太多 如果不能手动输入只能去选择的化 太不人性化 而且效率低下

需要解决的痛点:

1.如何展示name 给后端id
2.用户直接输入正确的name 如何传id
3.用户直接输入错误的name 如何解决
下面直接放解决方案

这里主要说一下value-key这个属性
好像在以前 必须要在原数据里有value 这个字段才会匹配到v-model 展示用 如今多了一个新的属性以后可以直接映射到你需要的object.key 来展示绑定用

handleSelect方法如下

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

这里通过name来找到后端给的数据 对应的id 赋值给params

等于说用两条数据来存储我们需要的状态!

问题1.解决
问题2. 如果用户直接输入呢? 那我们在点击按钮提交前再做一次handleSelect的校验.. 即可
问题3. 这里有2种方案 1 让后端去匹配 2. 前端做form表单校验

---

我们来看下问题3 前端限制的方案
通过el-form表单验证 传入rules

//规则定义在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不存在的的时候 这里也调用callback认为校验成功 (不是必填项) 原理是通过value 去比对后端给的list里是否有对应的值..