Vuetify 如何对 v-data-table 中的自定义单元格进行排序？答案

【问题标题】：Vuetify How can I sort a custom cell in a v-data-table?Vuetify 如何对 v-data-table 中的自定义单元格进行排序？
【发布时间】：2021-06-29 14:44:44
【问题描述】：

我有一个带有这些标题的表格：

    headersfav: [
      {text: 'Datum', value: 'createdate'},
      {text: 'Nachname', value: 'lastname'},
      {text: 'Vorname', value: 'firstname'},
      {text: 'Adresse', value: 'address', sortable: true},
      {text: 'Status', value: 'status'},
    ],

我在这样的 v-data-table 组件中使用它：

<v-data-table
    :headers="headersfav"
    :items="itemsfav"
    :search="searchfav"
    :custom-filter="customSearch"
    :sort-by="['createdate']"
    multi-sort
    :sort-desc="[true]"
>

对于地址字段，我使用这个：

<template #item.address="{ item }">{{ item.street }}, {{ item.city }}</template>

当我尝试对其进行排序时，没有任何反应，我必须在这里使用自定义排序功能吗？我怎样才能做到？

【问题讨论】：

address 字段是原语还是对象/数组？
你可以在我的问题中看到它：<template #item.address="{ item }">{{ item.street }}, {{ item.city }}</template>

标签： vue.js vuetify.js

【解决方案1】：

由于属性address 似乎是一个对象，因此您必须在需要对其进行排序时指向实际属性，这是在value 属性的标题定义中完成的：

在这种情况下，可能是address.street 或address.city

    headersfav: [
      {text: 'Datum', value: 'createdate'},
      {text: 'Nachname', value: 'lastname'},
      {text: 'Vorname', value: 'firstname'},
      {text: 'Adresse', value: 'address.street', sortable: true},
      {text: 'Status', value: 'status'},
    ],

【讨论】：