基于多个字段对Vuetify DataTable进行排序

goqiplq2 于 2023-06-24 发布在 Vue.js

关注(0)|答案(2)|浏览(195)

在Vuety2.X中，可以使用VDataTable的自定义排序工具实现一个排序函数，该函数使用多个字段对行进行排序。下面是一个对一张表进行排序的示例。单击名称列时，行将按名称字母顺序排序。同名的人将按年龄顺序排序

<v-data-table :custom-sort="sortTableRows" :headers="headers" :items="people" />

export default {
  data() {
    const people = [
      {name: 'Bob', age: 25},
      {name: 'Ann', age: 25},
      {name: 'Bob', age: 21}
    ]
    const headers = [
      {text: 'Name', value: 'name'},
      {text: 'Age', value: 'age'}
    ]
    return {headers, people}
  },
  methods: {
    sortTableRows(items, sortBy, sortDesc, locale, customSorters) {
      if (sortBy[0] === 'name') {
        items.sort((row1, row2) => {
          const nameDiff = row1.name.toLowerCase().localeCompare(row2.name.toLowerCase())
          if (nameDiff === 0) {
            return row1.age - row2.age
          }
          return nameDiff
        })
        return items
      } else {
        // TODO implement sorting for age column
      }
    }
  }
}

在Vuetify 3.X中，custom-sort prop已被custom-key-sort取代。然而，这只提供了对正在排序的字段的访问，因此似乎没有任何方法可以在Vuetify 3.X中实现上面的排序功能。下面是一个使用custom-key-sort按字母顺序对名称进行排序的示例

<v-data-table :custom-key-sort="customSorters" :headers="headers" :items="people" />

methods: {
  customSorters() {
    return {
      name: (name1, name2) => {
        const nameDiff = row1.name.toLowerCase().localeCompare(row2.name.toLowerCase())
        // AFAIK there's no way to access the age field here
        return nameDiff
      },
      age: (age1, age2) => { /* TODO implement sorting for age column */ }
    }
  }
}

在Vuetify 3.X中是否可以实现一个使用多个字段对VDataTable的行进行排序的排序函数？

vue.js

来源：https://stackoverflow.com/questions/76390698/sorting-a-vuetify-datatable-based-on-multiple-fields

2条答案

按热度按时间

tzcvj98z1#

到目前为止，似乎还没有Vuetify 3相当于自定义排序。但是，您可以同时使用sort-by属性和update：sortBy事件来执行所需的操作。

<template>
  <v-data-table
    v-model:items-per-page="itemsPerPage"
    :headers="headers"
    :items="people"
    :sort-by="sortBy"
    item-value="name"
    @update:sortBy="sortTable"
  ></v-data-table>
</template>

<script>
  export default {
    data() {
      return {
        itemsPerPage: 10,
        headers: [
          { title: 'Name', key: 'name' },
          { title: 'Age', key: 'age' },
        ],
        people: [
          { name: 'Bob', age: 25 },
          { name: 'Ann', age: 25 },
          { name: 'Bob', age: 21 },
          { name: 'Bob', age: 23 },
          { name: 'Ann', age: 31 },
          { name: 'Bob', age: 28 },
          { name: 'Ann', age: 18 },
        ],
        sortBy: [],
      }
    },
    methods: {
      sortTable(evt) {
        // Allows unsorting
        if (!evt.length || evt.length < this.sortBy.length) {
          this.sortBy = []
          return
        }
        const key = evt[0].key
        const order = evt[0].order
        switch (key) {
          case 'name':
            this.sortBy = [
              { key: 'name', order: order },
              { key: 'age', order: 'asc' },
            ]
            break
          case 'age':
            this.sortBy = [{ key: 'age', order: order }] // TODO implement sorting for age column
            break
          default:
            this.sortBy = []
        }
      },
    },
  }
</script>

您可以在VuetifyPlayground上查看。

赞(0）回复(0）举报 2023-06-24

qij5mzcb2#

根据你所描述的，听起来this page可能对你很方便，在Vuetify 3.X中有这个元素的单排序和多排序 prop （看起来他们改变了处理它的方式，从“custom-key-sort”到“v-model：sort-by”）。通过文档：

<template>
  <v-data-table
    v-model:sort-by="sortBy"
    :headers="headers"
    :items="desserts"
    class="elevation-1"
  ></v-data-table>
  <v-code class="mt-4">
    <pre>{{ sortBy }}</pre>
  </v-code>
</template>

我可能误解了问题/应用程序。

赞(0）回复(0）举报 2023-06-24

我来回答

基于多个字段对Vuetify DataTable进行排序

2条答案

相关问题

热门标签

最新问答