Question

我有一个数组auditResult（数据来自response.data.data），其值类似于 -internalID -fieldName -旧值 -NewValue

我有一张桌子

  <v-data-table :items="auditResults" :headers="headers" class="searchable sortable">
    <template v-slot:items="props">
      <td>{{ getCodeValue(props.item.codeid) }}</td>
      <td>{{ props.item.fieldname }}</td>
      <td>{{ props.item.oldvalue }}</td>
      <td>{{ props.item.newvalue }}</td>
      <td>{{ props.item.requestedwhen | formatDate }}</td>
      <td>{{ props.item.changedappliedwhen | formatDate }}</td>
      <td>{{ props.item.requestedby }}</td>
      <td>{{ props.item.reasonforchange }}</td>
    </template>
    <template v-slot:no-results>
      <v-alert :value="true" color="error" icon="warning">Found no results.</v-alert>
    </template>
  </v-data-table>

现在我有一个名为getCodeValue的方法，其中将internalID与Code进行比较以获取Code Value 这是代码：

getCodeValue(codeid) {
  let codeFound = this.codeResults.find(m => m.internalid == codeid);
  if (codeFound) {
    this.auditResults.codeid = codeFound.code;
    return this.auditResults.codeid;
  }
  return "Code not found";
}

现在我的问题是代码将被排序，表正在使用internalID对其进行排序。原因是表项是auditResult。

如何实现该表应该对getCodeValue方法中的代码进行排序，而不是对auditResult中的internalID进行排序。

Answer 1

您可以通过在标头定义中传递v-data-table选项，来给sort您自己的函数以用于比较行

在标题中：

headers: [
   { text: "Code", value: "codeid", sort: function(a, b) { // implement custom compare function here }
   }
]

传递给sort的函数应实现与Array.prototype.sort中使用的“合同”

如果项相等则返回0
如果a
如果a> b（b在前）返回+1。

一些注意事项：

this.auditResults.codeid = codeFound.code;-auditResults是一个数组，因此您要向数组实例添加新属性，而不更改数组内部对象中codeid的值
我不建议这样做。 每次重新渲染模板时，每一行都会调用您的函数，因此最终您将在每一行中获得“找不到代码”值
您可能应该在从API接收数据后一次（beware of Vue's Change Detection Caveats）将新属性（其值由函数查找）添加到数据对象中，而不是每次都查找值。然后，您将不需要任何自定义排序或自定义呈现逻辑...

Answer 2

   formatMember(){
  let newMembers = this.auditResults.slice();
  newMembers.map((el) => (el.codeid = this.getCodeValue(el.codeid)));
  return newMembers;
}

我明白了。因此，无需手动对数据进行排序，我们可以更改计算组件中数据模型的属性。这对我有效100％。

在我的vuetify表而不是auditResult中，我将其更改为formatMember。表示该表正在使用计算方法来获取数组对象。

    <v-data-table
    :items="formatMember"
    :headers="headers"
    class="searchable sortable"
  >

希望这会在将来对其他人有所帮助。

谢谢。

在v-data-table中自定义列排序顺序

2 个答案: