2

我正在使用 multiselect PrimeNG 来显示或隐藏我的 ptable 的列，它可以很好地隐藏列，但是当我将它们显示回来时，它们会出现并附加到表格的最后一个，所以这会破坏表格列的顺序，因为我认为多选创建一个列数组以显示或隐藏它在隐藏时弹出并添加回数组，因此它终于出现了。

4

2 回答 2

3

您可以为列添加唯一键，然后在更改过滤器时，您可以根据唯一键进行排序。

在 ts 中：

cols = [
      { field: 'name', header: 'Name', key: 1 },
      { field: 'type', header: 'Type', key: 1 },
      { field: 'description', header: 'Description', key: 3 },
      { field: 'created_on', header: 'Created on', key: 4 }
    ]

private _selectedColumns: any;

@Input('selectedColumns')
set selectedColumns(selectedColumns: any) {
  this._selectedColumns = selectedColumns;
  this._selectedColumns.sort((a, b) => a.key- b.key)
}

get selectedColumns(): any { return this._selectedColumns; }

在 html 模板中：

<p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"defaultLabel="Column Options">
</p-multiSelect>
于 2020-01-22T07:53:50.387 回答
-1

您必须只维护两个数组，一个选定的列列表说“ selectedColumns ”，所有列的其他数组说“ columnsList ”现在在多选onChange事件中创建一个函数说 toggle() 现在在这个函数中遍历数组columnsList并检查是否selectedColumns在其中包含该列名，就是这样，即使您隐藏列之间的列或撤消它，您也可以保持表列的顺序。

这是正确的方法，您必须理解并实施。希望能帮助到你。

于 2020-01-27T13:40:04.503 回答