做了个人员远程搜索的功能,测试说要把姓名和员工下拉展示的时候一起放出来,开始感觉一头雾水,后来看了下例子就豁然开朗,自己也写了个。
话不多说,上代码:
<el-autocomplete
v-model="addform.fromUser"
:fetch-suggestions="querySearchAsync"
placeholder="请输入关键字"
:trigger-on-focus="false"
clearable
@select="handleSelect"
style="width: 100%"
></el-autocomplete>
querySearchAsync(queryString, cb) {
let restaurants = this.restaurants;
let results = [];
results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
if (queryString.length >= 2) {
getDelegateUserCode(this.tenantInfo.deptFromTenant, queryString).then((res) => {
if (res.length > 0) {
res.map((item) => {
return item.value = item.userName + '(' + item.userCode + ')';
});
results = res;
cb(results);
} else {
this.$message({
type: 'warning',
message: '未找到符合条件的结果!'
});
}
});
}
},
createStateFilter(queryString) {
return (restaurant) => {
return restaurant.userName.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
};
},
handleSelect(item) {
this.fromUserValue = item.userCode;
if (item.userCode === this.userBase.userCode) {
this.$message({
type: 'warning',
message: '不可以委托给自己!'
});
this.addform.fromUser = '';
}
},
主要注意的是这一块:
res.map((item) => {
return item.value = item.userName + '(' + item.userCode + ')';
});
item.value = item.userName + ‘(’ + item.userCode + ‘)’ 是给返回的res添加了一个新的属性,是因为el-autocomplete下拉列中只识别value,不过现在也有新的办法,用value-key
最后附上效果图