知识点总结:element远程下拉搜索el-autocompleted的自动补全使用方法和注意事项

• 注意事项
  使用时需要注意cb(list)函数里面list的格式,必须存在的是value值

• 代码

<el-autocomplete
 v-model="formCust.custCellphnNo" class="width-200" @keyup.enter.native="checkTel" @change="checkTel"
   :fetch-suggestions="queryCust"
   placeholder="请输入内容"
   @select="chooseCust"
   :trigger-on-focus="false"
   :popper-append-to-body="false"
   :popper-class="formCust.custCellphnNo.length < 4 ? 'hide' : ''"
   @change.native="checkTel"
 ></el-autocomplete>

// JS部分
// 搜索用户
 queryCust(key, cb){
   if(key.length < 4) return;
   // ....逻辑代码
	let data = res.data.data.data;
	data.forEach(ele => {
	  list.push({
	    value: ele.fullName + '(' + ele.custCellphnNo + ')',
	    basic: {//.....   }
	  });
	});
	// 将得到的逻辑代码放到list数组中
	cb(list);
 }
// 选择用户
 chooseCust(item){
   // 这里的item是下拉列表(也就是cb(list))里的元素对象
 },
// 校验用户
checkTel(){
	// 这里放置验证逻辑
}

• 曾经遇到过的坑

1. cb(list)里的list数组结构不对,导致没有得到结果时,下拉菜单也会出现
2. 模糊查询时,得到的数据需要绑定时,不能在触发下拉的菜单显示时绑定,因为这时候会有多个值,需要在点击时才能绑定