本文已参与「新人创作礼」活动，一起开启掘金创作之路。 这个功能在项目中用的比较多，初次使用是有一些疑惑的，今天我把两种处理方式列了出来，也是记录一下。有需要的可以参考一下，节约一下时间。 效果图
数据项目
accessoriesDetailList:[{
"accessoriesDetailId": "1524337676692275201",
"accessoriesTypeId": "1524328850022727681",
"accessoriesTypeName": "按钮类",
"accessoriesName": "清水按钮",
"specification": "蓝色，圆形，带灯",
"creatorId": "1",
"createTime": "2022-05-11 18:36:38",
"updateId": null,
"updateTime": null
}, {
"accessoriesDetailId": "1524337723974664193",
"accessoriesTypeId": "1524328850022727681",
"accessoriesTypeName": "按钮类",
"accessoriesName": "清水按钮",
"specification": "绿色，圆形，带灯",
"creatorId": "1",
"createTime": "2022-05-11 18:36:49",
"updateId": null,
"updateTime": null
}, {
"accessoriesDetailId": "1524337769067626497",
"accessoriesTypeId": "1524328850022727681",
"accessoriesTypeName": "按钮类",
"accessoriesName": "清水按钮1",
"specification": "红色，原型，带灯1",
"creatorId": "1",
"createTime": "2022-05-11 18:37:00",
"updateId": "1",
"updateTime": "2022-05-12 09:30:49"
}, {
"accessoriesDetailId": "1529636181926969345",
"accessoriesTypeId": "1529636020970553346",
"accessoriesTypeName": "手机类",
"accessoriesName": "苹果",
"specification": "13Pro max 1TB 远峰蓝",
"creatorId": "1",
"createTime": "2022-05-26 09:31:00",
"updateId": null,
"updateTime": null
}, {
"accessoriesDetailId": "1529638795209048065",
"accessoriesTypeId": "1529636020970553346",
"accessoriesTypeName": "手机类",
"accessoriesName": "苹果",
"specification": "13mini 512GB 原谅绿",
"creatorId": "1",
"createTime": "2022-05-26 09:41:23",
"updateId": null,
"updateTime": null
}
]
```js
查询一次搜索
```js
querySearch(queryString, cb) {
let that = this;
let tempAccessoriesDetailList = that.accessoriesDetailList.map((item) => {
return {
value: item.accessoriesName,
accessoriesDetailId: item.accessoriesDetailId,
};
});
var accessoriesDetailOptions = tempAccessoriesDetailList;
var results = queryString
? accessoriesDetailOptions.filter(that.createFilter(queryString))
: accessoriesDetailOptions;
cb(results);
},
createFilter(queryString) {
return (user) => {
return user.value.match(queryString) != null;
};
},
handleSelect(item) {
//console.log(item,"item")
this.form.accessoriesName = item.value;
},
两种处理方式
请求一次搜索
querySearch(queryString, cb) {
let that = this;
let tempAccessoriesDetailList = that.accessoriesDetailList.map((item) => {
return {
value: item.accessoriesName,
accessoriesDetailId: item.accessoriesDetailId,
};
});
var accessoriesDetailOptions = tempAccessoriesDetailList;
var results = queryString
? accessoriesDetailOptions.filter(that.createFilter(queryString))
: accessoriesDetailOptions;
cb(results);
},
createFilter(queryString) {
return (user) => {
return user.value.match(queryString) != null;
};
},
handleSelect(item) {
//console.log(item,"item")
this.form.accessoriesName = item.value;
},
每次都请求搜索
//每次请求
querySearchAsyn2(queryString, cb) {
let that = this;
listAllSysUser({}).then((response) => {
that.userOptions = response.data; //用户列表
let tempUsers = that.userOptions.map((item) => {
return {
value: item.nickName, //必须转化为value,
userId: item.userId,
};
});
var userOptions = tempUsers;
var results = queryString
? userOptions.filter(that.createStateFilter(queryString))
: userOptions;
cb(results);
});
},
createStateFilter(queryString) {
return (user) => {
return user.value.match(queryString) != null;
};
},
handleSelect(item) {
// console.log(item,this.queryParams.userId,"queryParams.userId");
this.queryParams.userId = item.userId;
},
