前端实现表格多条件筛选

代码实现

// 待遍历的初始化数据
let initData = [
  { userName: "系统管理员", confirmType: "已确认", execution: "已执行" },
  { userName: "系统管理员1", confirmType: "未确认", execution: "已执行" },
  { userName: "系统管理员2", confirmType: "已确认", execution: "未执行" },
]

let tableData = []

/**
 *实现表格多条件筛选，将搜索条件都拼接程字符串，用eval去计算字符串，执行脚本
 *
 * @param {*} [searchKeys={}] 筛选的字段及值，格式为键值对类型
 * @param {*} [fuzzySearch=[]] 需模糊搜索的字段
 */
function search(searchKeys = {}, fuzzySearch = []) {
  // 筛选条件数组，只存入有值的
  let condition = []
  // 判空条件数组
  let emptyCondition = []
  // 遍历条件键值对
  for(let i in searchKeys) {
    // 判断搜索条件是否有值
    if(searchKeys[i]) {
      if(fuzzySearch.indexOf(i) !== -1) {
        condition.push(`n["${i}"].indexOf(searchKeys["${i}"]) != -1`)
      }else {
        condition.push(`n["${i}"]==searchKeys["${i}"]`)
      }
    }
    emptyCondition.push(`searchKeys["${i}"]`)
  }
  // 筛选需要几个条件同时达成，所以用的&&
  let realCondition = condition.join("&&")
  // 用或去连接表达式是为了判断需不需要去做筛选，若没必要，则赋初始值
  let realEmptyCondition = emptyCondition.join("||")
  if(eval(realEmptyCondition)) {
    let result = initData.filter(n => {      
      // 用eval去执行字符串表达式
      return eval(realCondition)
    })
    tableData = result
  }else {
    tableData = JSON.parse(JSON.stringify(initData))
  }
  console.log("table--->", tableData)
}
let userName = "系统管理员"
let confirmType = "已确认"
let execution = ""

search({
  userName, confirmType, execution
}, ["userName"])

实现思路

1.将筛选条件拼接成字符串，当用filter去筛选表格数据时，用eval去计算字符串，将其转换成表达式，得到对应的数据
2.方法传入的参数需为对象，内容为键值对，搜索的字段为key，搜索的值为value。有实验过用数组，不过拼接字符串与执行表达式的地方会不好处理

若有更好的思路，望大家指正！