需求：基于Power-select下拉框实现表格记录的唯一事件名称筛选

我来帮你搞定用Power Select筛选表格的需求！结合你的现有代码，我整理了一套完整的实现方案：

1. 完善模板代码 #

首先把你的表格模板补全，同时把遍历的源改成筛选后的模型列表：

<table>
  <tr>
    <th>
      Event Name
      {{#power-select 
        options=uniqEventName 
        placeholder="Select Event Name" 
        selected=selectedEventName
        onchange=(action (mut selectedEventName))
        as |eventName|
      }}
        {{humanize-string eventName capitalize=true}}
      {{/power-select}}
    </th>
    <!-- 可添加其他表头字段 -->
  </tr>
  {{#each filteredModelNames as |modelItem|}}
  <tr>
    <td>{{humanize-string modelItem.eventName capitalize=true}}</td>
    <!-- 渲染其他表格字段，比如 {{modelItem.date}} {{modelItem.location}} -->
  </tr>
  {{else}}
  <tr>
    <td colspan="1">No records found matching the selected event.</td>
  </tr>
  {{/each}}
</table>

2. 编写控制器/组件逻辑 #

假设你是在控制器中处理逻辑（组件中逻辑完全通用），定义需要的属性和计算属性：

import Controller from '@ember/controller';
import { computed } from '@ember/object';
import { uniqBy } from '@ember/array';

export default class YourController extends Controller {
  // 绑定Power Select的选中值
  selectedEventName = null;

  // 从模型中提取不重复的事件名称作为下拉选项
  get uniqEventName() {
    return uniqBy(this.model, 'eventName').map(item => item.eventName);
  }

  // 自动计算筛选后的模型列表
  @computed('model.[]', 'selectedEventName')
  get filteredModelNames() {
    const { model, selectedEventName } = this;
    if (!selectedEventName) {
      // 未选中任何选项时返回全部记录
      return model;
    }
    // 根据选中的事件名称精准匹配筛选
    return model.filter(item => item.eventName === selectedEventName);
  }
}

关键细节说明 #

• 把Power Select的onchange改成了(mut selectedEventName)，直接绑定选中值，既简洁又能自动跟踪状态变化。
• uniqEventName用uniqBy确保下拉选项没有重复值，避免用户看到重复的事件名称。
• filteredModelNames是计算属性，会在模型数据或选中值变化时自动重新计算，实时更新表格内容。
• 添加了{{else}}分支，当没有匹配记录时显示友好提示，提升用户体验。

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