情景:引用elementUI组件里面的建议搜索框时,下拉框显示内容空白。
原因:可能是value值设置的问题,代码如下
html代码:
<el-form-item label="一级客户经理" prop="userNumber1Name">
<el-autocomplete
v-model="formlist.userNumber1Name"
:fetch-suggestions="querySearchAsync"
placeholder="请输入"
@select="handleSelect1"
></el-autocomplete>
</el-form-item>
js代码:
<script>
export default {
name: "amendinf",
},
data() {
return {
// 表单验证
rules: {
userNumber1Name: [
{ required: true, message: "一级客户经理不能为空", trigger: "blur" },
],
},
restaurants: [],
};
},
created() {
this.lod();
this.restaurants = this.loadAll();
},
methods: {
// 获取模糊查询的数据
loadAll() {
this.$api
.getusernameList()
.then((res) => {
console.log("res", res);
if(res){
if (res.data.status == 200 && res.data.data.length > 0) {
this.restaurants = res.data.data;
return this.restaurants;
}
}
})
.catch();
},
// 根据输入模糊查询处理
querySearchAsync(queryString, cb) {
var restaurants = this.restaurants;
// 解决element建议搜索框无法显示内容 的数据处理
for (var i = 0; i < restaurants.length; i++) {
restaurants[i].value = restaurants[i].userName;
}
var results = queryString
? restaurants.filter(this.createStateFilter(queryString))
: restaurants;
// 调用 callback 返回建议列表的数据
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
cb(results);
}, 3000 * Math.random());
},
createStateFilter(queryString) {
return (state) => {
return (
state.userName.toLowerCase().indexOf(queryString.toLowerCase()) === 0
);
};
},
// 选择一级客户经理
handleSelect1(item) {
// console.log(item);
this.formlist.userNumber1 = item.userNumber;
},
},
};
</script>
经过querySearchAsync函数里面的 数据处理最终效果实现