Question

我创建了一个多选表，允许您选择多行;但是，为了检查当前标记（无论是否检查），我需要执行以下操作。

在table组件内，

  {{#each rows as |row index|}}
    {{table-x-row
      row=row
      index=index
      data=data
      selected=(mut selected)
      maxSelectionCount=maxSelectionCount
    }}
  {{/each}}

在table-row JavaScript文件中

  classNameBindings: ['isSelected:selected'],

  isSelected: computed('selected.[]', {
    get() {
      const index = this.get('index');
      const row = this.get('data.rows')[index];
      return this.get('selected').includes(row);
    }
  }),

以上代码会在每次选定列表更改时触发每个table-row组件，这意味着我有 10 行。计算属性将被调用 10 次。

有任何解决此问题的建议吗？

Answer 1

我试图通过简化表和行来模拟您在下面的twiddle中提到的情况（它们不是实际的表和行;而只是用于说明案例的虚拟组件）。正如您所提到的那样，正在为每一行计算table-x-row内的计算属性。这在性能和数据封装方面都存在问题。将所有selected table-x数组传递给每一行会中断数据封装。为什么单个行需要知道其他行的选择状态（我的意思是表的selected属性）？

为了避免这种情况，您可以在table-x中创建计算出的数组属性，并将isSelected信息直接传递给行，如下面的twiddle。通过这种方式; rowsWithSelectionInfo中定义的计算属性table-x仅在实际rows更改时修改;当行选择改变时，不会重新计算任何内容。现在，每个单独的行都单独传递其isSelected属性，因此不知道该表的整个数据或整个选择信息。

如何解决子组件

1 个答案: