按 vue.js 中的列标题排序

Posted 2023-02-22

【中文标题】按 vue.js 中的列标题排序

【英文标题】：sort by column header in vue.js

【发布时间】：2018-12-23 07:31:51

【问题描述】：

我正在使用 Vue 2.x，根据 documentation - orderby 指令不再可用。

我宁愿不必拥有另一个 JS 库，但是如果我可以让 lodash 工作，那么我想就可以了。我尝试了其他几种 JS 排序尝试（link,link），但似乎根本不起作用。

但是，我希望能够单击表头值并根据该值进行排序。

我的 rowData 数组是通过数据库调用填充的，它看起来像这样：

rowData:Array[79]
 0:Object
  ActiveDate:"06/25/2018"
  CountryId:10
  ExportedDate:""
  ExportedStatus:"0"
  Id:1751
  ItemType:"Condition Types"
  LogId:72843
  ModifiedDate:"06/25/2018"
  Name:"GenericNameGoesHere"
  ParentTable:"tableNameGoesHere"
  Region:"Home Office"
  Type:"CI"
  TypeId:123
  selectedExport:false

我首先要做的是按 ItemType 属性进行排序。在 rowData 我有多个 ItemType 值（Condition Types、Medical Reference、Synonyms、References 等）。

在我的表头中，我有以下内容：

v-on:click="sortBy('ItemType')"

这是我目前所拥有的（sortKey 尚未被使用，因为 ItemType 是硬编码的）：

sortBy: function (sortKey) 
    var vm = this;
    _.orderBy(vm.rowData, ['ItemType'], ['asc']);
,

目前，我没有看到任何排序。老实说，我不确定是我的 Vue 代码还是 lodash 代码。

如果您需要查看更多我的数组或任何其他代码，请告诉我。我真的很希望能够按列标题排序（目前还有 7 个其他标题我需要排序）。

编辑：

我也试过这个（没有改变任何东西）：

return _.orderBy(vm.rowData, ['ItemType']);

【问题讨论】：

尝试将return 添加到您的sortBy 函数中。

@HassanImam - 那没用。我也参加了 ['asc']，但也没有用。

请添加一个有效的sn-p。

@HassanImam - 我必须把一些东西放在一起。但是该数组是动态填充的，因此它与来自数据库不同。

【参考方案1】：

_.orderBy 不会改变数组，它返回一个新数组，所以vm.rowData 本身没有排序，Vue 不会对任何更改做出反应（因为没有）。即使_.orderBy 确实改变了数组，Vue 仍然无法跟踪更改，因为它看不到数组访问（Vue 的反应性陷阱之一，文档：https://vuejs.org/v2/guide/list.html#Caveats）。在这种情况下，您需要做的是：

sortBy: function (sortKey) 
    let vm = this;
    vm.$set(vm, 'rowData', _.orderBy(vm.rowData, ['ItemType'], ['asc']);
,

这应该可行。

【参考方案2】：

也许是这样？

@click="sortBy('ItemType')"

sortBy (key) 
  this.rowData = _.orderBy(this.rowData, key, 'asc')
,