博客

     之前做的项目中使用了element的选择器，然而由于选项太多不好找就更换为带输入建议的输入框

但我们接口要求并非是传入公司名称，而是传入这个注册公司的id，后端传入的数据结构经过转换后大致是这样的：

companyList = [
    { company_id: 1, comopany_name: '腾讯' },
    { company_id: 2, comopany_name: '阿里' },
    { company_id: 3, comopany_name: '华为' },
    { company_id: 4, comopany_name: '百度' },
    { company_id: 5, comopany_name: '饿了么' },
]

因此需要先在选择框中v-mode绑定l公司名称，再通过element输入框的点击事件进行find方法在公司列表companyList中查找，代码如下：

<el-form-item label="公司名称" prop='company_name' v-show="dialogStatus=='create'">
         <el-autocomplete
          class="inline-input"
          v-model="administratorsForm.company_name"
          :fetch-suggestions="querySearch"
          placeholder="请选择公司"
          @select="handleSelectCompany"
        ></el-autocomplete>
        </el-form-item>

    querySearch(queryString, cb) {
      var companyList = this.companyList
      var results = queryString
        ? companyList.filter(this.createFilter(queryString))
        : companyList
      cb(results)
    },
    createFilter(queryString) {
      return companyList => {
        return (
          companyList.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1
        )
      }
    },
// 点击选项时找到id并赋值
handleSelectCompany(company) {
      this.administratorsForm.company_id = this.companyList.find(item =>
        item.value === company.value
      ).company_id
    },

但光是这样会出现两个问题：

1.只在点击时赋值，如果用户只输入但并没有点击这个选项，则无法获取到company_id，后端可能会返回该值为空；

2.如果别人输入一个不存在的选项，就提交表单了，结果同上。

解决方案：

针对问题1，可以在提交表单的“确定”按钮点击事件之后，发送请求之前判断是否存在company_name但不存在company_id,如果是，再使用一次find方法赋值

addAdministrators() {
      if (this.administratorsForm.company_name && !this.administratorsForm.company_id) {
        this.administratorsForm.company_id = this.companyList.find(item =>
          item.value === this.administratorsForm.company_name
        ).company_id
      } //在获取id之后再发送ajax请求
    // 这里为ajax请求方法的部分
}

对于问题2，我们可以设一个表单验证，如果是列表中没有的名字，会报错。

data() {
  function isInArray(arr, value) {  // 判断是否在数组中有该选项的方法，也可以用es6的some方法
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
        return true
      }
    }
  return false
  } 
  const validatePass = (rule, value, callback) => {
    this.companyList.forEach(item => {     // 造出一个只有公司名的数组companyNameList
      this.companyNameList.push(item.value)
    })
    console.log(this.companyNameList)    // ['腾讯','阿里','华为','百度'，'饿了么']
    if (isInArray(this.companyNameList, value)) {
      callback()
    } else {
      callback(new Error('请选择列表中已有选项'))
    }
  }
  return {
    companyList: [],
    companyNameList: [],
    administratorsForm: {
      company_id: undefined,
      company_name: ''
    },
    rules: {
      company_name: [
        { required: true, message: '不能为空', trigger: 'change' }, // 如果不是必填项不用加
        { trigger: ['blur', 'change'], validator: validatePass }
      ]
    }
  }
}，

补充问题：如果el-autocomplete接收到的数组中没有value键名，则不会显示输入建议。