素数树表选择未按预期工作答案

【问题标题】：primeg tree table selection not working as expected素数树表选择未按预期工作
【发布时间】：2019-07-05 10:02:42
【问题描述】：

我对树形表有一个有趣的问题，当我使用树形部分时，选择设置为所有表而不是选定行。

有 stackblitz 项目
https://stackblitz.com/edit/angular-primeng-table-toggle-4tmfyk?file=src%2Fapp%2Fapp.component.ts

【问题讨论】：

你能说得更清楚些吗？

【解决方案1】：

树表的选择模式将树中的每个节点/行与所选节点进行比较，如果匹配，则选择该节点。因此，在您的 stackblitz 示例中，由于您有三个数据节点与数据 {name: 'Desktop', size: '20mb', type: 'Folder'} 完全匹配，因此当单击三行中的任何一行时，所有三行都显示为选中状态。

解决此问题的一种方法是向每个数据元素添加唯一的第四个字段（索引、父级或每个实例唯一的其他内容）。然后，即使额外的字段在树表中不可见，它也会使每个节点都是唯一的。

请注意，对于此解决方案，您还需要从元素中删除“dataKey”属性，因为这会将选择比较限制为仅“name”字段的值，或者将“dataKey”更改为唯一字段（例如，索引）。所以改变：

<p-treeTable [value]="files2" [columns]="cols" selectionMode="single" [(selection)]="selectedNode1" dataKey="name">

到：

<p-treeTable [value]="files2" [columns]="cols" selectionMode="single" [(selection)]="selectedNode1" dataKey="index">

...然后修改您的数据树节点以包含 index 字段：

myfiles: TreeNode[] = [
    { data: { name: 'Desktop', size: '20mb', type: 'Folder', index: 0 }},
    { data: { name: 'Cloud',   size: '20mb', type: 'Folder', index: 1 },
       children: [
         { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', index: 2 }},
         { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', index: 3 }},
       ]
    },
    { data: { name: 'Desktop', size: '20mb', type: 'Folder', index 4 },
       children: [
         { data: { name: 'backup-1.zip', size: '10mb', type: 'Zip', index: 5 }},
         { data: { name: 'backup-2.zip', size: '10mb', type: 'Zip', index: 6 }},
       ]
    },
    { data: { name: 'Desktop', size: '20mb', type: 'Folder', index: 7 }}
];

我更新的数据树中的“索引”字段为选择提供了您正在寻找的唯一性。

【讨论】：