开发中,遇到一个需求,后端一次返回所有的数据,这些数据每条都有很多字段。前端要完成根据某些字段完成条件搜索功能。业务代码如下:
_form是输入条件搜索的对象,例如根据名字name,状态status,类型type来搜索。
dataList和dataList_copy都是后端返回的所有数据,两者内容一样,dataList_copy是一个临时变量,dataList是显示在页面的数据。
// 积分规则表格条件搜索确定按钮
onSearchByCondition (_form) {
let result = []
result = this.dataList_copy.filter(item => {
// 默认当什么也不输入的时候返回所有数据
let name = true
let type = true
let status = true
// 有输入名字
if (_form.name) {
// 判断匹配条件
name = item.ruleName.indexOf(_form.name) !== -1
}
// 有输入类型
if (_form.type) {
// 判断匹配条件
type = item.calculateType === _form.type
}
// 有输入状态
if (_form.status) {
// 判断匹配条件
status = item.status === _form.status
}
// 返回符合条件的数据,放进result中
return name && type && status
})
this.dataList = result
}如果不用临时变量dataList_copy就会在搜索后把dataList改变,导致无法显示所有数据