Как сохранить порядок в множественном выборе PrimeNG, когда я использую это, чтобы скрыть столбцы таблицы?

Question

Я использую множественный выбор PrimeNG, чтобы показать или скрыть столбцы моего ptable, он отлично работает для скрытия столбцов, но когда я показываю их обратно, они приходят и добавляются к последнему из таблицы, так что это разрушает порядок столбцов таблицы как я думаю, что multiselect создает массив столбцов, чтобы показать или скрыть его, он появляется при скрытии и добавляется обратно в массив, следовательно, он, наконец, приходит.

Answer 1

Вы можете добавить уникальный ключ в ваши столбцы, а затем при смене фильтра вы можете отсортировать по вашему уникальному ключу.

В 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>

Answer 2

Вы должны просто поддерживать два массива, один список выбранных столбцов, скажем, " selectedColumns ", а другой массив всех столбцов, скажем, " columnsList ", теперь на множественном выборе onChange событие создайте функцию скажем toggle (), теперь в этой функции просмотрите массив columnsList и проверьте, есть ли у selectedColumns имя этого столбца, то есть вы сможете поддерживать порядок столбцов таблицы, даже если вы прячете столбцы между ними или отменяете их.

---

Это правильный подход, только вы должны его понять и реализовать. Надеюсь, поможет.