在前端做条件搜索

1,728 阅读1分钟

开发中,遇到一个需求,后端一次返回所有的数据,这些数据每条都有很多字段。前端要完成根据某些字段完成条件搜索功能。业务代码如下:

_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改变,导致无法显示所有数据