手写表格数据筛选

1. 判断数据是否为空

const isEmpty = (data) => {
// 先排除掉‘’ 、null、undefined、NaN
  if(!!data) {
    if(typeof data === 'object') {
    // 排除[]和{}
      if(Object.keys(data).length === 0) {
        return true
      } else {
        return false
      }
    } else {
      return false
    }
  } else {
    return true
  }
}

2. 判断是否满足筛选条件

// 判断每一项都是对象的两个数组是否有共同项
hasCommonItems(array1, array2) {
  const ids1 = array1.map(item => item.id);
  const ids2 = array2.map(item => item.id);
  for (let id of ids1) {
    if (ids2.includes(id)) {
      return true;
    }
  }
  return false;
}

isMeetWith(value1, value2) {
  const dataType = typeof value2;
  // 判断筛选项的数据类型
  switch (dataType) {
    case 'string':
      return value1.includes(value2);
      break;
    case 'number':
      return value1 === value2;
      break;
    case 'object':
      // 可能为{}/[{}, {}]/[, ] 即下拉框模式 目前所有下拉框都是多选模式 所以排除{}情况
      const isExistence = value2.findIndex(i => {
        const iType = typeof i;
        if (iType === 'object') {
          // 数组中每一项为对象 即[{}, {}]
          if (value1?.length) {
            // 如果表格数据中该字段值为数组 只需判断与筛选条件是否有重合即可
            return hasCommonItems(value1, value2)
          } else if (value1?.length === 0) {
            // 如果表格中该属性值为空 则直接判断为不满足条件
            return false;
          } else {
            // 如果表格数据中该字段值为非数组
            return value1.id === value2.id;
          }
        } else {
          // 数组中每一项为字符串或者数字 即[, ]
          return value1 == i
        }
      })
      return isExistence !== -1
      break;
  }
}

3. 过滤表格数据

tableDataFilter(tableData, primaryData, searchObj) {
  const searchKeys = Object.keys(searchObj);
  tableData = primaryData.filter(data => {
      const res = searchKeys.map(key => {
      	// 筛选项为空 则每一项数据都满足条件
        if (isEmpty(searchObj[key])) {
          return true;
        } else if (!data[key]) {
        // 表格中该属性没有值 则不满足条件（该判断未过滤掉[]和{}）
          return false;
        } else {
        // 筛选条件和表格属性都有值
          return isMeetWith(data[key], searchObj[key]);
        }
      })
      return res.every(i => i)
    });
}

写的仓促 若有失误 烦请指点