BootstrapVue中如何对JSON数组按多字段排序并渲染到b-form-select组件

实现方案 #

首先注意你原始JSON的键为大写开头的ID/Name/Age，原有模板中使用小写的item.id/item.name无法匹配到值，需要先修正取值写法。

步骤1：编写排序计算属性

排序前先对原数组做浅拷贝，避免sort方法的原地排序修改原始数据：

computed: {
  sortedJson() {
    // 排序规则配置，按优先级从前到后排列，可自由扩展字段
    // 每项格式：[字段名, 排序方向，'asc'升序/'desc'降序]
    const sortRules = [
      ['Name', 'asc'], // 第一优先级按Name升序，符合当前需求
      ['Age', 'asc'], // 第二优先级按Age升序，后续可按需调整/新增字段
      ['ID', 'asc']
    ]
    return [...this.json].sort((a, b) => {
      for (const [field, order] of sortRules) {
        let res
        // 数字类型字段按数值比较，字符串按本地化字典序比较
        if (!isNaN(Number(a[field])) && !isNaN(Number(b[field]))) {
          res = Number(a[field]) - Number(b[field])
        } else {
          res = a[field].localeCompare(b[field], 'zh-CN')
        }
        // 处理降序逻辑
        if (order === 'desc') res = -res
        // 当前字段比较有差异直接返回结果，否则继续比较下一个字段
        if (res !== 0) return res
      }
      return 0
    })
  }
}

如果暂时只需要单字段按Name排序，直接简化计算属性即可：

computed: {
  sortedJson() {
    return [...this.json].sort((a, b) => a.Name.localeCompare(b.Name))
  }
}

步骤2：修改模板遍历数据源

仅需将v-for的遍历源替换为计算属性，原有展示顺序完全保持不变：

<b-form-select class="showPointer">
  <option v-for="item in sortedJson" :key="item.ID">
    ID: {{ item.ID }}, Name: {{ item.Name }}, Age: {{ item.Age }}
  </option>
</b-form-select>

后续调整排序规则只需修改sortRules配置即可，无需改动模板代码。

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