树表有一个有趣的问题,当我使用树节时,选择设置为所有表而不是选定的行。
有stackblitz项目
https://stackblitz.com/edit/angular-primeng-table-toggle-4tmfyk?file=src%2Fapp%2Fapp.component.ts
答案 0 :(得分:0)
树表的选择模式将树中的每个节点/行与所选节点进行比较,如果匹配,则选择该节点。因此,在您的stackblitz示例中,由于您有三个与数据{name: 'Desktop', size: '20mb', type: 'Folder'}
完全匹配的数据节点,因此,当单击三行中的任何三行时,所有三行均显示为选中状态。
解决此问题的一种方法是向每个数据元素添加唯一的第四字段(索引,父项或每个实例唯一的其他内容)。然后,即使多余的字段在树表中不可见,它也会使每个节点唯一。
请注意,对于此解决方案,您还需要从元素中删除“ dataKey”属性,因为这会将选择比较限制为仅“名称”字段的值,或者将“ 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 }}
];
更新后的数据树中的“索引”字段为所选内容提供了您所寻找的唯一性。