Vue 2.6.10下如何依据shops_masters数据对item.shops升序排序

实现思路 #

利用JS原生的Array.sort()方法，匹配两个门店名称在shops_masters中对应的order_number值做差值比较，即可完成升序排序。需要注意Vue2的响应式规则，直接为item.shops重新赋值整个排序后的数组即可触发视图更新。

代码示例 #

假设shops_masters的结构为门店名称作为key，对应门店信息作为value，示例代码如下：

// 排序核心逻辑
this.item.shops = this.item.shops.sort((shopA, shopB) => {
  // 匹配门店对应的排序值，不存在的门店默认设置大值排到末尾
  const orderA = this.shops_masters[shopA] ? this.shops_masters[shopA].order_number : 9999
  const orderB = this.shops_masters[shopB] ? this.shops_masters[shopB].order_number : 9999
  // 升序返回a-b，要降序的话改成b-a即可
  return orderA - orderB
})

如果需要封装成复用方法，可以放到Vue的methods中：

methods: {
  sortShopsByOrder() {
    this.item.shops = this.item.shops.sort((shopA, shopB) => {
      const orderA = this.shops_masters[shopA]?.order_number ?? 9999
      const orderB = this.shops_masters[shopB]?.order_number ?? 9999
      return orderA - orderB
    })
  }
}

边界说明 #

如果item.shops中存在shops_masters里没有的门店名称，以上代码会将该类门店统一排序到末尾，可根据业务需求调整默认的排序值即可。

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