带分页的表格,怎么做一个输入框多条件数据筛选?

1.首先,你必须要获取表格不带分页的数据:allData

2.通过computed属性处理数据,直接上代码!

const formatData = computed() => {
  // 将搜索查询字符串拆分为数组，并过滤出有效的查询词
  const query = searchQuery.value.split(/\s+/).filter(Boolean)
  // 过滤所有数据，只保留匹配查询词的数据项
  const filteredData = allData.value.filter((item) => {
    // 每个查询词都必须在数据项的特定字段中找到
    return query.every((x) => {
      // 查询词可能包含多个用逗号分隔的子查询词
      return x.split(',').every((queryItem) => {
        // 定义一组特殊的字段，在这些字段中搜索查询词
        const specialFields = ['groupId', 'name', 'operationsName', 'outpatientName', 'salesName']
        // 检查特殊字段是否包含查询词
        return specialFields.some((field) => {
          const fieldValue = item[field]
          return fieldValue && String(fieldValue).toLowerCase().includes(queryItem.toLowerCase())
        })
      })
    })
  })
  // 更新过滤后的数据总数
  total.value = filteredData.length

  // 检查列表是否存在且非空
  if (!filteredData || !Array.isArray(filteredData) || filteredData.length === 0) {
    return // 如果列表不存在或为空，则直接返回
  }

  // 根据页面大小和当前页码返回分页后的数据
   return filteredData.slice(
    (queryParams.pageNo - 1) * queryParams.pageSize,
    queryParams.pageNo * queryParams.pageSize
   )
}

3.el-table标签上绑定数据:data="formatData",处理分页的html部分引用el-pagination,很简单我就不贴出来了

4.多条件筛选==>多个条件用空格或者中文模式下的逗号隔开,是中文模式下哦!