时间戳

首页 > 解决方案 > 自定义 v-data-table 中的列排序顺序

vue.js - 自定义 v-data-table 中的列排序顺序

问题描述

我有一个数组 auditResult（数据来自 response.data.data），其值类似于 -internalID -fieldName -OldValue -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。

标签： vue.jsvuetify.js

解决方案

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

在标题中：

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

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

  1. 如果项目相等则返回 0
  2. 如果 a < b (a 先出现)，则返回 -1
  3. 如果 a > b 则返回 +1（b 先出现）

一些注意事项：

  1. this.auditResults.codeid = codeFound.code;-auditResults是一个数组，因此您正在向数组实例添加新属性，而不是更改codeid数组内对象中的值
  2. 反正我不建议做这样的事情。每次重新渲染模板时都会为每一行调用您的函数，因此最终您将在每一行中得到“代码未找到”值
  3. 在从 API 接收数据后，您可能应该将新属性（通过您的函数查找的值）添加到数据对象中一次（注意 Vue 的变更检测警告），而不是每次都查找值。那么您将不需要任何自定义排序或自定义呈现逻辑......

推荐阅读