Vuetify Table 可排序列不工作

Question

我有这些 vuetify table，这就是我配置 header

的方式

         headers: [
            {
                text: 'Name',
                align: 'start',
                sortable: false,
                value: 'name',
                width: '20%'
            },
            { text: 'Link Count', value: 'count', width: '10%', sortable: true },
            { text: 'URL', value: 'details', width: '50%' },
            { text: 'Actions', value: 'id', width: '20%' }
        ]

<v-data-table :headers="headers" :items="items" :search="search">
    ...
    <template v-slot:item.count="{ item }">
        {{ item.details.length }}
    </template>
    ...

如您所见，Link 计数 列有 sortable: true。

为什么它不起作用...

如何进一步调试？

Answer 1

您将 'Link Count' 列设置为 count 字段并在组件中使用 item.count 插槽，但内部 table 排序器不知道这是什么 count 字段.

如果您确定您的 details 列永远不会有特定值，例如 null、undefined 等，您可以这样更改您的代码：

...
{ text: 'Link Count', value: 'details.length', width: '10%', sortable: true},
...
<template v-slot:item.details.length="{ item }">
  {{ item.details.length }}
</template>
...

（或者你甚至不需要覆盖这个插槽）

否则，如果您关心 null/undefined，最好使用您当前的数据加上额外计算的 [=12] 创建 computed 属性 =] 列，并在组件中使用它代替 items。这样，例如：

<v-data-table
  :headers="headers"
  :items="computedDesserts"
  :items-per-page="5"
></v-data-table>
...
data () {
  return {
    headers: [
      { text: 'Dessert (100g serving)', value: 'name'},
      { text: 'Dessert Count', value: 'count' },
      ...
    ],
    desserts: [
      { name: 'Frozen Yogurt', calories: 159, ... },
      ...
    ],
  }
},
computed: {
  computedDesserts() {
    return this.desserts.map(item => {
      return { ...item, count: this.isValidString(item.name) ? item.name.length : 0 }
    });
  }
},
methods: {
  isValidString(val) {
    return typeof val === 'string'; //Or you can use your own condition
  }
}

带有计算属性的 CodePen 演示 is available here。

Answer 2

默认情况下，<v-data-table> 为所有列提供了可排序功能。根据你的问题，如果默认情况下你希望 count 列在网格加载时按 ascending/descending 顺序排序，我的理解是什么。

如果是，您可以使用数据网格的 external-sorting 功能来实现。

工作演示 :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      sortBy: 'count',
      sortDesc: false,
      headers: [
            {
                text: 'Name',
                align: 'start',
                value: 'name',
                width: '20%'
            },
            { text: 'Link Count', value: 'count', width: '10%' },
            { text: 'URL', value: 'details', width: '50%' },
            { text: 'Actions', value: 'id', width: '20%' }
        ],
      items: [
        {
          name: 'Frozen Yogurt',
          count: 159,
          details: 'Detail 1',
          id: 24
        },
        {
          name: 'Ice cream sandwich',
          count: 237,
          details: 'Detail 2',
          id: 37
        },
        {
          name: 'Eclair',
          count: 262,
          details: 'Detail 3',
          id: 23
        },
        {
          name: 'Cupcake',
          count: 305,
          details: 'Detail 4',
          id: 67
        }
      ],
    }
  }
})

<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.4/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/>
<div id="app">
  <v-app id="inspire">
    <div>
      <v-data-table
        :headers="headers"
        :items="items"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        class="elevation-1"
      ></v-data-table>
      </div>
    </div>
  </v-app>
</div>

如果我的理解不正确或需要根据要求进行任何进一步更改，请告诉我。

Vuetify Table 可排序列不工作

Vuetify Table sortable column is not working

javascript

vue.js

vuejs2

vue-component

vuetify.js