如何筛选需展示的表格列并保留原数组的排序顺序

要实现用户选中的表格列按原表头数组的顺序展示，核心思路是遍历原表头数组，筛选出用户已选中的列，而非按用户选择的顺序去匹配。

原问题场景 #

原表头数组：

const headers = ['first', 'second', 'third', 'fourth'];

用户选择的列顺序：['first', 'third', 'second']
当前代码返回用户选择的顺序，但我们需要得到与原表头一致的排序：['first', 'second', 'third']

解决方案代码 #

替换原有的map+find逻辑，改用filter遍历原表头数组：

// 假设table.selectedHeaders是用户选中的列数组
const sortedSelectedHeaders = headers.filter(header => table.selectedHeaders.includes(header));

逻辑说明 #

• 遍历原表头数组headers的每一项，检查该表头是否存在于用户选中的table.selectedHeaders数组中
• 符合条件的表头会按原数组的顺序被保留，自然实现按原排序展示选中列的需求

如果原表头是对象数组（比如每个元素包含value字段），可调整为：

const headers = [
  { value: 'first', label: '第一列' },
  { value: 'second', label: '第二列' },
  { value: 'third', label: '第三列' },
  { value: 'fourth', label: '第四列' }
];

const sortedSelectedHeaders = headers.filter(header => table.selectedHeaders.includes(header.value));

内容的提问来源于stack exchange，提问作者One Service