记录项目中el-autocomplete 的使用

el-autocomplete 遇到的问题

<el-autocomplete
 	style="width: 100%"
    v-model.trim="orderForm.clueSource" 
    :fetch-suggestions="((queryString,cb)=>{
      querySearch(queryString,cb,'dataOptions')
    })"
    placeholder="请选择或输入"
    clearable>
</el-autocomplete>

1. 下拉框数据不显示

若下拉框数据不显示，查看数据是否有 value 字段，el-autocomplete显示的时候必须有value字段，可手动添加一个value属性

  let data = res.data.data.queryData.rows;
  data.forEach(item => {
   	this.$set(item, 'value', item.name)
  })
  this.dataOptions = data;

无需其他参数，使用默认参数写法如下：

 :fetch-suggestions="querySearch"

若页面中多处使用了 el-autocomplete，可通过传参公用 fetch-suggestions 对应方法
dataOptions 对应 querySearch（） 参数中的 options

 :fetch-suggestions="((queryString,cb)=>{
   querySearch(queryString,cb,'dataOptions')
  })"

 // js
 querySearch(queryString, cb, options) {
   let data = this[options]; // 下拉框数据
   var results = queryString
     ? data.filter(this.createFilter(queryString))
     : data;
   // 调用 callback 返回建议列表的数据
   cb(results);
 },
 createFilter(queryString) {
   return field => {
     return (
       field.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
     );
   };
 },

2. 下拉框显示自定义内容

当下拉框要显示的 name 属性有重复项时，用户无法确认下拉框的具体值，这时就需要自定义下拉框的内容

 <el-autocomplete
   style="width: 100%"
    v-model.trim="workPerson" 
    :fetch-suggestions="((queryString,cb)=>{
      querySearch(queryString,cb,'dataOptions')
    })"
    placeholder="请选择或输入"
    @select="((item,field) => {
      handleSelect(item,'workPerson')
    })"
    clearable
    >
   <template slot-scope="{item}">
 	  // 显示内容为： 姓名  身份证号
      <span class="addr">{{ item.name + '&nbsp;&nbsp;' + item.idCard }}</span>
   </template>
 </el-autocomplete>

 /* 
  item 默认参数，表示选定项的内容
  field 表示传入的字段名，即绑定的值
*/
handleSelect(item,field) {
    this[field] = item.name; // 绑定值传 name 属性对应值
}

3. 使用clearable属性,点击清除提示不显示

相关链接： https://segmentfault.com/q/1010000020709879

解决办法：

（1）设置 ref=‘elautocomplete’，cb()时再执行this.$refs.elautocomplete.handleFocus()方法

补充：此方法有bug，导致下拉框不能收起

 /* 
   	 options:  下拉框数据
   	 refName:  ref 属性值
 */
 querySearch(queryString, cb, options,refName) {
  	let data = this[options]; 
    var results = queryString
      ? data.filter(this.createFilter(queryString))
      : data;
    // 调用 callback 返回建议列表的数据
    cb(results);
    // 解决clearable 清空后提示(下拉框数据)不显示
    this.$refs[refName].handleFocus(); 
  },

（2） clear() 时 手动触发input失去焦点

 <el-autocomplete
	:fetch-suggestions="queryString"
	 clearable
	 @clear="setBlur()"
	 placeholder="请选择或输入">
</el-autocomplete>

  setBlur() {
      // 在点击由 clearable 属性生成的清空按钮时，主动触发失去焦点，
      // 解决‘fetch-suggestions’输入建议不提示的bug
      document.activeElement.blur()
  }