Angular PrimeNG表格使用全局过滤时如何排除指定行使其始终可见

核心实现逻辑 #

• 首先给需要固定的特殊行添加独有的标记字段，比如isPinned: true，和你提到的唯一标识符做关联，方便快速识别
• 改写表格的过滤/搜索逻辑，过滤时永远把标记为固定的行排除在过滤池之外，过滤完成后再把固定行插入到你需要的位置（比如表头下方第一行、表格末尾）
• 注意处理排序场景，如果表格有排序功能，固定行同样不要参与排序逻辑，单独放在预设位置即可

原生JS实现示例 #

// 原始表格数据
const tableData = [
  { id: 'pin-001', name: '固定行数据', value: 'xxx', isPinned: true },
  { id: 'data-001', name: '普通数据1', value: 'aaa' },
  { id: 'data-002', name: '普通数据2', value: 'bbb' },
  // 其他数据
]

// 过滤方法
function filterTable(keyword) {
  // 拆分固定行和普通数据
  const pinnedRows = tableData.filter(item => item.isPinned)
  const normalRows = tableData.filter(item => !item.isPinned)
  
  // 只对普通数据做过滤
  const filteredNormal = normalRows.filter(item => {
    return Object.values(item).some(val => String(val).includes(keyword))
  })
  
  // 合并后返回，固定行放在最前面，需要放末尾就调换顺序
  return [...pinnedRows, ...filteredNormal]
}

常用组件库表格适配方案 #

如果是用Element UI、Ant Design这类组件库的表格，不需要修改组件源码，直接在传入data之前做预处理即可：

• 监听搜索/筛选参数的变化
• 每次参数变化时按照上面的逻辑拆分固定行、过滤普通数据、合并后再传给表格组件的数据源属性
• 如果使用组件库自带的filter功能，需要给固定行的每一列的过滤方法都返回true，保证永远匹配

注意事项 #

• 如果固定行需要支持单独编辑，注意修改数据时不要改动isPinned标记字段
• 分页场景下，固定行不要计入分页总数，每一页都单独插入固定行即可
• 行选中、行展开等交互逻辑如果不需要应用到固定行，可以通过唯一标识符判断跳过对应逻辑

内容的提问来源于stack exchange，提问作者Arko Mandal