如何在ember-models-table中切换类并获取选中行数据

我之前在使用ember-models-table v2开发时也遇到过类似的需求，给你分享几个亲测有效的方案：

• 绑定组件内置的selectedItems属性
  首先在模板的models-table组件上绑定selectedItems到你定义的数组属性，同时指定selectRow动作来触发选中切换：

  {{models-table
    data=model
    columns=columns
    selectedItems=selectedRows
    selectRow={{action 'toggleRowSelection'}}
  }}
  

  这里的selectedRows是你在控制器或组件里声明的空数组，用来存储选中的行数据。

• 处理选中数据的两种方式

  1. 自动监听选中项变化
     在控制器/组件里通过观察者监听selectedRows的变化，一旦选中状态改变就自动处理数据：

     import Controller from '@ember/controller';
     import { observer } from '@ember/object';
     
     export default Controller.extend({
       selectedRows: [],
     
       onSelectedRowsChange: observer('selectedRows.[]', function() {
         const selectedData = this.get('selectedRows');
         // 这里写你的业务逻辑，比如提交、展示详情等
         console.log('当前选中的行数据：', selectedData);
         this.processSelectedData(selectedData);
       }),
     
       processSelectedData(selectedData) {
         // 自定义处理逻辑
       }
     });
     

  2. 手动触发处理（比如按钮点击）
     在模板里加一个处理按钮，点击时获取选中数据：

     <button {{action 'handleSelectedRows'}}>处理选中行</button>
     

     然后在组件/控制器的actions里实现处理逻辑：

     actions: {
       handleSelectedRows() {
         const selectedData = this.get('selectedRows');
         if (selectedData.length === 0) {
           alert('请先选择至少一行数据');
           return;
         }
         // 执行你的处理操作
         this.processSelectedData(selectedData);
       }
     }
     

• 自定义选中逻辑（可选）
  如果需要单选、批量选中这类特殊逻辑，可以自己实现selectRow动作：

  actions: {
    toggleRowSelection(row) {
      const selectedRows = this.get('selectedRows');
      // 示例：单选逻辑
      if (selectedRows.includes(row)) {
        selectedRows.removeObject(row);
      } else {
        selectedRows.setObjects([row]); // 清空原有选中项，只保留当前行
      }
    }
  }
  

最后提醒下：检查你的列配置里有没有设置disableSelection: true，如果有的话会禁用行选中功能，把它去掉就行。

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