如何触发自定义v-data-table列表头的排序功能？ [英] How to trigger sort function in custom v-data-table column headers?

问题描述

我有一个对项目进行分组的v-data-table。在使用带有v槽的自定义页眉时，如下图所示-如何启用默认页眉上的内置排序功能？

有没有一种方法可以用sortThisColumn函数触发内置排序函数，或者任何其他方式？目前，我的表标题无法单击。

<v-app class="v-app-custom" v-if="myItems.length > 0">
      <div class="section">
        <v-data-table
          :headers="headers"
          :items="myItems"
          :items-per-page="30"
          hide-default-footer
          hide-default-header
          item-key="uuid"
          group-by="mentor_id"
          class="mentor-table"
        >
          <template v-slot:header="{ props }">
            <thead class="v-data-table-header">
              <tr>
                <th
                  class="text-start"
                  v-for="header in props.headers"
                  :key="header.value"
                  :style="{ width: `${header.width}px` }"
                  @click="sortThisColumn(header.value)"
                >
                  <span>{{ header.text }}</span>
                  <v-icon v-if="header.sortable" color="white" small>{{
                    sort[header.value] == "desc"
                      ? "fa-chevron-down"
                      : "fa-chevron-up"
                  }}</v-icon>
                </th>
              </tr>
            </thead>
          </template>
          <template
            v-slot:group.header="{ group, props, headers }"
            sort-icon="fa-chevron-down"
          >

表头：-

headers: [
  {
    text: "Status",
    value: "status",
    width: 82,
    sortable: false,
  },
  { text: "Type", value: "type", width: 140, sortable: true },
  { text: "Creator", value: "creator", width: 140, sortable: true },
  { text: "Date", value: "due_date", width: 141, sortable: true },
  { text: "Mentor", value: "mentor", width: 141, sortable: true },
],

推荐答案

检查我制作的这个代码箱：https://codesandbox.io/s/stack-70975751-p9msn?file=/src/components/CustomSorting.vue

您可以在Headers数组中定义一个自定义排序函数，如下所示。我以前执行过此操作，以便向我的一个日期列添加自定义排序。

headers: [
   {
      text: 'Date',
      value: 'date',
      align: 'center',
      sort: (a, b) => {
         var date1 = a.replace(/(d+)/(d+)/(d+)/, '$3/$2/$1')
         var date2 = b.replace(/(d+)/(d+)/(d+)/, '$3/$2/$1')

         return date1 < date2 ? -1 : 1
      }
   }
]

了解这一点后，您可以在您的案例中执行类似的操作。

data: (vm) => ({
   headers: [
      {
         text: 'Date',
         value: 'date',
         sort: (a,b) => {
            return vm.myCustomSort(a,b)
         }
      },
   ]
})

这篇关于如何触发自定义v-data-table列表头的排序功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！