如何在Vue中基于数组数据手动实现表格排序功能

现有排序失效的核心原因 #

你当前的排序逻辑直接对字符串类型的Name字段使用减法运算，字符串做减法会返回NaN，所以排序完全不生效。针对数值类型的Amount_Raised_Millions字段排序，还要提前做类型转换，避免表格返回字符串格式的数值导致排序异常。 #

基础排序功能实现 #

先修改accessSpreadSheet方法中的排序逻辑，实现默认按融资金额降序排列：

async accessSpreadSheet() {
  const doc = new GoogleSpreadsheet(process.env.VUE_APP_API_KEY);
  await doc.useServiceAccountAuth(creds);
  await doc.loadInfo();
  const sheet = doc.sheetsByIndex[0];
  const rows = await sheet.getRows({
    offset: 1
  })
  // 按Amount_Raised_Millions降序排序，异常值统一按0处理
  this.rows = rows.sort((a,b) => {
    const amountA = Number(a.Amount_Raised_Millions) || 0
    const amountB = Number(b.Amount_Raised_Millions) || 0
    return amountB - amountA
  });
  this.loading = false;
}

表头点击切换排序扩展实现 #

如果需要后续做表头点击切换排序，按以下步骤改造即可：

1. 新增排序相关响应式变量 #

data() {
  return {
    rows: [],
    loading: true,
    sortKey: 'Amount_Raised_Millions', // 默认排序字段
    sortAsc: false // 默认排序方向：false为降序，true为升序
  }
},

2. 把排序逻辑移到计算属性（避免污染原始数据） #

computed: {
  sortedRows() {
    // 拷贝原始数组再排序，避免sort原地修改原数据
    return [...this.rows].sort((a,b) => {
      const valA = a[this.sortKey]
      const valB = b[this.sortKey]
      // 数值字段排序逻辑
      if (this.sortKey === 'Amount_Raised_Millions') {
        const numA = Number(valA) || 0
        const numB = Number(valB) || 0
        return this.sortAsc ? numA - numB : numB - numA
      }
      // 字符串字段排序逻辑（适配名称、地区等字段后续扩展排序）
      if (typeof valA === 'string' && typeof valB === 'string') {
        return this.sortAsc ? valA.localeCompare(valB) : valB.localeCompare(valA)
      }
      return 0
    })
  }
},

3. 修改模板渲染逻辑 #

把原来遍历rows的逻辑改成遍历计算属性sortedRows：

<Row v-bind:key="row.id" v-for="row in sortedRows" v-bind:row="row" />

给需要支持排序的表头加点击事件，以Amount Raised列为例：

<th @click="changeSort('Amount_Raised_Millions')">
  Amount Raised
  <span v-if="sortKey === 'Amount_Raised_Millions'">{{ sortAsc ? '↑' : '↓' }}</span>
</th>

4. 新增切换排序的方法 #

methods: {
  // accessSpreadSheet方法保留，删掉原来的sort逻辑即可
  async accessSpreadSheet() {
    const doc = new GoogleSpreadsheet(process.env.VUE_APP_API_KEY);
    await doc.useServiceAccountAuth(creds);
    await doc.loadInfo();
    const sheet = doc.sheetsByIndex[0];
    const rows = await sheet.getRows({
      offset: 1
    })
    this.rows = rows
    this.loading = false;
  },
  // 切换排序字段/方向
  changeSort(key) {
    if (this.sortKey === key) {
      this.sortAsc = !this.sortAsc
    } else {
      this.sortKey = key
      this.sortAsc = false
    }
  }
}

注意事项 #

• Array.sort是原地排序方法，直接操作原始数组会修改源数据，建议拷贝后再排序
• 字符串排序不要使用加减法，要使用localeCompare方法实现自然排序
• 从表格取到的数值字段大概率是字符串格式，排序前要先转Number处理

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