Question

关注.json：

[{
"STATUS": "0500",
"POSID": "..."
},
{
"STATUS": "1500",
"POSID": "..."
},
{
"STATUS": "0500",
"POSID": "..."
}]

通过来自lodash的countBy计算值：

  countData (data) {
    return _.countBy(_.map(this.data, function (d) {
      return d.status
    }))
  }

生成一个表格，显示我的状态编号和计数：

 <tr v-for="(value, key) in countData">
   <td>{{ key }}</td>
   <td>{{ value }}</td>
 </tr>

现在我想通过价值来排序。

我怎样才能做到这一点？

Answer 1

看起来countData已经是一个计算属性，所以如果你需要保留它，你可以从另一个计算属性（如this.countData）引用它，它应该提供结果的排序版本用于演示。

例如，

computed: {
  countData () { ... },
  sortedCountData () {
    // this.countData looks something like: {'0500': 1, ...}
    return Object.keys(this.countData)
      .sort((i, j) => this.countData[j] - this.countData[i])
      .map(key => ({ key, value: this.countData[key] }));
  },
}

然后，您应该更新标记，以便v-for来自sortedCountData来源。

如果您不需要保留countData，也可以在那里进行排序。

Answer 2

您可以在渲染之前对数组进行排序。或者你可以使用css来做到这一点。

<tbody style="display:flex;flex-direction:column"> 
// <tbody> or <table> if parent is <table> tag 
  <tr v-for="(value, key) in countData" style="order:{{value}}">
  <td>{{key}}</td>
  <td>{{value}}</td>
  </tr>
</tbody>

你需要在td上给出固定宽度以防它变形

VueJS - 对由lodash创建的CountBy数组进行排序

2 个答案: