Vue.js中如何按自定义顺序渲染数组对象列表？

核心思路 #

通过定义固定的优先级列表，以consultingBudgetHeadName作为唯一标识来映射数据，彻底摆脱对数组索引的依赖。

实现步骤 #

1. 定义自定义顺序列表

创建一个包含所有consultingBudgetHeadName的数组，按你需要的渲染顺序排列：

const CUSTOM_ORDER = [
  "Available hours",
  "Absence hours",
  "Available customer hours",
  "Agreement hours",
  "Available hours project",
  "Average price",
  "Utilization agreements %"
];

2. 添加排序方法

在Vue组件的methods中添加一个方法，接收原始cells数组并返回按自定义顺序排列的新数组：

methods: {
  getSortedCells(cells) {
    // 按自定义顺序映射并过滤掉可能不存在的项
    return CUSTOM_ORDER.map(name => cells.find(cell => cell.consultingBudgetHeadName === name)).filter(Boolean);
  }
}

3. 模板中使用排序后的数据

替换原有的索引引用，直接遍历排序后的数组：

<ul v-for="row in data.rows" :key="row.id"> <!-- 用row的唯一标识作为key -->
  <li v-for="cell in getSortedCells(row.cells)" :key="cell.consultingBudgetHeadName">
    {{ cell.consultingBudgetHeadName }}
  </li>
</ul>

为什么这更可靠？ #

• 不依赖服务器返回顺序：无论数据库或后端接口调整数据顺序，只要consultingBudgetHeadName的值不变，渲染顺序就不会出错。
• 语义化标识：使用业务含义明确的consultingBudgetHeadName而非易变的数组索引，代码可读性和维护性更强。
• 容错性：filter(Boolean)会自动过滤掉任何在自定义列表中存在但未在返回数据中找到的项（如果有的话）。

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