如何实现Clarity Datagrid一次仅显示一个筛选器工具提示？

我完全理解你的困扰——多个筛选器的工具提示重叠在一起确实不够友好，虽然这是默认行为，但我们可以通过编程手段来优化这个体验，确保同一时间只有一个筛选器的工具提示处于打开状态。下面是针对Angular项目（Clarity基于Angular）的具体实现方案：

核心思路 #

通过监听每个筛选器的打开状态变化，当有新的筛选器被打开时，自动关闭其他已经处于打开状态的筛选器。

具体实现步骤 #

1. 获取所有筛选器实例 #

在你的组件类中，使用Angular的@ViewChildren装饰器来获取页面上所有的Clarity Datagrid筛选器组件实例：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { ClrDatagridFilter } from '@clr/angular';

@Component({
  selector: 'app-your-datagrid-component',
  templateUrl: './your-datagrid-component.component.html'
})
export class YourDatagridComponent {
  @ViewChildren(ClrDatagridFilter) filters!: QueryList<ClrDatagridFilter>;
}

2. 绑定筛选器的打开状态变更事件 #

在你的Datagrid模板中，给每个<clr-dg-filter>组件绑定clrOpenChange事件，指向我们即将定义的处理函数：

<clr-dg-column>
  <ng-container clrDgColumnTitle>
    列名1
    <clr-dg-filter [clrFilterValue]="filter1" (clrOpenChange)="handleFilterOpenChange($event)">
      <!-- 你的筛选器内容 -->
    </clr-dg-filter>
  </ng-container>
</clr-dg-column>

<clr-dg-column>
  <ng-container clrDgColumnTitle>
    列名2
    <clr-dg-filter [clrFilterValue]="filter2" (clrOpenChange)="handleFilterOpenChange($event)">
      <!-- 你的筛选器内容 -->
    </clr-dg-filter>
  </ng-container>
</clr-dg-column>

3. 实现状态变更处理函数 #

在组件类中添加handleFilterOpenChange函数，当某个筛选器被打开时，遍历所有筛选器并关闭其他打开的筛选器：

handleFilterOpenChange(isOpen: boolean) {
  if (isOpen) {
    // 遍历所有筛选器，关闭当前打开的其他筛选器
    this.filters.forEach(filter => {
      // 找到刚打开的筛选器，跳过它，关闭其余已打开的
      const activeFilter = this.filters.find(f => f.open);
      if (filter.open && filter !== activeFilter) {
        filter.open = false;
      }
    });
  }
}

补充说明 #

• 如果你的筛选器是通过*ngFor动态生成的，这个方案依然有效，因为QueryList会自动追踪动态添加的组件实例。
• 该实现直接利用Clarity组件官方暴露的open属性控制状态，属于合规操作，不会有兼容性风险。

这样处理后，用户每次只能打开一个筛选器的工具提示，彻底解决重叠的问题啦！

内容的提问来源于stack exchange，提问作者Geek at Heart