Как использовать пользовательскую сортировку vutify? - PullRequest
Новая
       17

Как использовать пользовательскую сортировку vutify?

0 голосов
/ 06 октября 2018

Я хотел бы использовать custom-sort в моей таблице данных.Моя цель - отсортировать таблицу DESC в отличие от ASC по умолчанию.Но я не знаю как.

Это начало моего компонента таблицы данных: 

  <v-data-table
  :headers="headers"
  :items="acts"
  hide-actions
  class="elevation-1"
  >
  <template slot="items" slot-scope="props">

    <td>{{ props.item.id }}</td>
    <td>{{ props.item.name }}</td>
    <td class="text-xs-center">{{ props.item.provider.id }}</td>
    <td class="text-xs-center">{{ props.item.category.name }}</td>
    <td class="text-xs-center">{{ props.item.budget }}</td>
    <td class="text-xs-center">{{ props.item.location.name }}</td>
    <td class="text-xs-center">{{ props.item.deets }}</td>
    <td class="text-xs-center">{{ props.item.keeping_it_100 }}</td>
    <td class="text-xs-center"><img width="50" height="50" :src="props.item.inspiration.inspiration"></td>
    <td class="justify-center layout px-0">....

И вот этот скрипт я использую: 

<script>
  export default {
    data () {
      return {

        dialog: false,
        customerSort: {
          isDescending: true,// I tried this? as the kabab format throws an error
        },
        headers: [
            { text: 'ID', value: 'id'},
            { text: 'Name', value: 'name' },  
            { text: 'Provider', value: 'provider' },
            { text: 'Category', value: 'category' },
            { text: 'Budget', value: 'budget' },
            { text: 'Country', value: 'location', sortable: true },
            { text: 'Keeping it 100%', value: 'keeping_it_100', sortable: false },
            { text: 'deets', value: 'deets', sortable: false },
            { text: 'inspiration', value: 'inspiration', sortable: false },
            { text: 'Cover', value: 'cover', sortable: false },
            { text: 'Actions', value: 'actions', sortable: false }
        ],

Согласно документам это function prop.Но я не нашел пример того, как его передать.

Это скриншот функции ...

Ответы [ 4 ]

0 голосов
/ 27 августа 2019

В vuetify 2 просто используйте sortBy = "date" и обновите: sort-desc 

<v-data-table
  :headers="headers"
  :items="acts"
  :pagination.sync="pagination"
  sortBy="date"
  update: sort-desc
 >
0 голосов
/ 10 февраля 2019

Вы можете использовать функцию, подобную этой: 

customSort(items, index, isDesc) {
  items.sort((a, b) => {
    if (index === "date") {
      if (!isDesc) {
        return compare(a.date, b.date);
      } else {
        return compare(b.date, a.date);
      }
    }
  });
  return items;
}

Где сравнение - это функция, которая сравнивает a.date и b.date, а возвращает 1 или -1

isDesc - это переменная, передаваемая таблицей, которая сообщает, в каком порядке пользователь хочет ее отсортировать.Если вы хотите отсортировать в desc, просто используйте! IsDesc в условии if-else

Чтобы использовать это в своем шаблоне, просто используйте 

<v-data-table
  :headers="headers"
  :items="Data"
  :custom-sort="customSort"
>
  <template slot="items" slot-scope="props">
    <td class="font-weight-black">{{ props.item.date }}</td>
    <td class="text-xs-right">{{ props.item.time }}</td>
    <td class="text-xs-right">{{ props.item.name }}</td>
  </template>
</v-data-table>

Чтобы убедиться, что ваши другие поля по-прежнему работают собычная сортировка использует 

customSort(items, index, isDesc) {
      items.sort((a, b) => {
        if (index === "date") {
          if (!isDesc) {
            return dateHelp.compare(a.date, b.date);
          } else {
            return dateHelp.compare(b.date, a.date);
          }
        } else {
          if (!isDesc) {
            return a[index] < b[index] ? -1 : 1;
          } else {
            return b[index] < a[index] ? -1 : 1;
          }
        }
      });
      return items;
    }
0 голосов
/ 18 июня 2019

ПРИМЕЧАНИЕ: следующий ответ предназначен для Vuetify 1.5.x

С небольшим опозданием на вечеринку здесь, если все, что вы хотите сделать, это отсортировать по убыванию по одному полю, тогда пользовательский-сортировать это не то, что вы хотите использовать, вам лучше использовать :pagination.sync prop

Пользовательская сортировка используется, когда вы хотите изменить поведение функции сравнения (например, сортировка на основе обратного илистрочная версия строки или правильная сортировка строк даты в формате «DD-MM-YYYY»).

Если вы хотите использовать нисходящую функциональность по умолчанию, используйте опору :pagination.sync, например, так:

<v-data-table
  :headers="headers"
  :items="acts"
  :pagination.sync="pagination"
>
    <template v-slot:items="props">...</template>
</v-data-table>

В вашем скрипте установите pagination: 

data () {
  return {
    pagination: {
      sortBy: 'id', // The field that you're sorting by
      descending: true
    }
  }
}

Это указывает на то, что вы хотите, чтобы таблица была первоначально отсортирована по убыванию id - id можно изменить на любое имя поляв наборе данных.

Стоит отметить, что это определяет только поведение по умолчанию, и если у вас включена сортировка для других заголовков, пользователи могут сортировать таблицу по любому полю.

0 голосов
/ 06 октября 2018

Исходя из этого ответа кода о custom-filter, я попытался использовать custom-sort.
Пожалуйста, обратитесь к этому ответу, если примените его к своему коду.

Последующий код, я подтвердил сортировку, когда я нажимаю заголовок «Калории».
Мой CodePen 

new Vue({
    el: '#app',
    data() {
        return {
            food: [
                { name: 'Bakchoi', type: 'vegetable', calories: 100 },
                { name: 'Pork', type: 'meat', calories: 200 },
                { name: 'Chicken Thigh', type: 'meat', calories: 300 },
                { name: 'Watermelon', type: 'fruit', calories: 10 },
            ],
            headers: [
                { text: 'Name', align: 'left', value: 'name' },
                { text: 'Food Type', align: 'left', value: 'type' },
                { text: 'Calories', align: 'left', value: 'calories' },
            ],
            search: '',

        };
    },
    methods: {
        customSort(items, index, isDescending) {
          // The following is informations as far as I researched.
          // items: 'food' items
          // index: Enabled sort headers value. (black arrow status).
          // isDescending: Whether enabled sort headers is desc
          items.sort((a, b) => {
              if (index === 'calories') {
                  if (isDescending) {
                      return b.calories - a.calories;
                  } else {
                      return a.calories - b.calories;
                  }
              }
          });

          return items;
        }
    }
})

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@0.15.2/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@0.15.2/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">

<div id="app">
    <v-app>
        <v-select
                label="Food Type"
                :items="['vegetable', 'meat', 'fruit']"
                v-model="search"
        ></v-select>

        <v-data-table
                :headers="headers"
                :items="food"
                :search="search"
                :custom-sort="customSort"
                hide-actions
        >
            <template slot="items" scope="{ item }">
                <td>{{ item.name }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.calories }}</td>
            </template>
        </v-data-table>
    </v-app>
</div>
...