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

本文链接：https://blog.youkuaiyun.com/webfullstack/article/details/83989895

注意事项
使用时需要注意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(){
	// 这里放置验证逻辑
}