时间戳

首页 > 解决方案 > Vue通过表格中的选定属性对对象数据进行排序

javascript - Vue通过表格中的选定属性对对象数据进行排序

问题描述

我从我的 api json 对象列表中得到这样的：

"object123": {
  "selected": false, 
  "value": 0.54
},

在前端，我有一个表格，我用复选框显示这些数据，如何通过这个选择属性对这些数据进行排序？你能给我一个小例子吗？

我试过了

sortedData: function() {
  if(this.calculated) {
    return this.calculated.sort(function(a, b) {
      return a.selected > b.selected
    })
  }
}

但后来桌子是空的。

标签： javascriptvue.jsfrontend

解决方案

您不能将sort()函数用于对象。为了使您的代码正常工作，您应该转换this.calculated为数组。

您可以使用此代码段将对象转换为数组。

let calculated = {
  "object1": {
    "selected": false,
    "value": 1
  },
  "object2": {
    "selected": false,
    "value": 20
  },
  "object3": {
    "selected": false,
    "value": 4
  },
  "object4": {
    "selected": false,
    "value": 24
  },
  "object5": {
    "selected": false,
    "value": 6
  },
  "object6": {
    "selected": false,
    "value": 0.26
  },
  "object7": {
    "selected": true,
    "value": 1.52
  },
  "object8": {
    "selected": false,
    "value": 0.54
  },
  "object9": {
    "selected": false,
    "value": 4.27
  }
}

let calculatedArray = []

for (const [key, value] of Object.entries(calculated)) {
  calculatedArray.push({
    id: key,
    ...value
  })
}

sortedData = function() {
  if(calculatedArray) {
    return calculatedArray.sort(function(a, b) {
      return b.selected - a.selected
    })
  } else {
    return []
  }
}

console.log(sortedData())
console.log(calculatedArray)

推荐阅读