Vuetify: Как отфильтровать данные в v-data-таблице? - PullRequest
Новая
       13

Vuetify: Как отфильтровать данные в v-data-таблице?

0 голосов
/ 03 июля 2018

В таблице данных я хочу отображать только элементы, у которых свойство 'display' равно 'true'. В компоненте v-data-table есть свойство filter. Но нет примера, показывающего, как его использовать.

Я пробовал несколько подходов, но безуспешно. Следующий фрагмент кода также доступен по адресу codepen . 

new Vue({
  el: '#app',
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'left',
          sortable: false,
          value: 'name'
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' }
      ],
      desserts: [
        {
          value: false,
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
          display: false
        },
        {
          value: false,
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
          display: true
        },
        {
          value: false,
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
          display: false
        },
        {
          value: false,
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
          display: true
        },
        {
          value: false,
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
          display: false
        },
        {
          value: false,
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
          display: true
        },
        {
          value: false,
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
          display: false
        },
        {
          value: false,
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
          display: false
        },
        {
          value: false,
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
          display: false
        },
        {
          value: false,
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
          display: false
        }
      ]
    }
  },
  methods: {
    filterItems(val, search) {
      return val.display;
    }
  }
})
<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      item-key="name"
      :filter="filterItems"
    >
      <template slot="items" slot-scope="props">
        <tr @click="props.expanded = !props.expanded" :class="[props.expanded && 'expanded']">
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">{{ props.item.calories }}</td>
          <td class="text-xs-right">{{ props.item.fat }}</td>
          <td class="text-xs-right">{{ props.item.carbs }}</td>
          <td class="text-xs-right">{{ props.item.protein }}</td>
          <td class="text-xs-right">{{ props.item.iron }}</td>
        </tr>
      </template>
      <template slot="expand" slot-scope="props">
        <v-card flat>
          <v-card-text>Peek-a-boo!</v-card-text>
        </v-card>
      </template>
    </v-data-table>
  </v-app>
</div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
</body>
</html>

Проблемная часть кода: 

  methods: {
    filterItems(val, search) {
      return ???;
    }
  }

Ответы [ 3 ]

0 голосов
/ 27 января 2019

Я долго боролся с этой проблемой, потому что я тоже думал: фильтр не работает. Позже, после большой боли, я понял, что мне нужен: search prop для использования: filter, и функциональность, которую я хотел, была не той, которая предоставляется Vuetify.

Как и вы, я хотел отфильтровать таблицу данных с помощью функции, которая возвращала логическое значение, т. Е. True, если должна отображаться строка.

Если кто-то ищет быстрое решение, чтобы сделать то же самое, простое «v-if» должно сработать. На основании примера сверху: 

<template slot="items" slot-scope="props" v-if="props.item.display">

Конечно, есть и другие решения, в зависимости от ваших потребностей, например, использование метода .filter в самом массиве десертов.

В моем случае, потому что я хотел всегда отображать 5 строк за раз в моей таблице данных (не используя скрытые действия), я в итоге использовал ловушку жизненного цикла созданного () вместо v-if: 

created: function() {
this.shownDesserts = this.desserts.filter(dessert => {
  return dessert.display
})

},

0 голосов
/ 14 июля 2019

Для реквизита, фильтр , это должно помочь: 

methods: {
  filterItems(val, search) {
    return val != null && typeof val !== 'boolean' && val.toString().toLowerCase().indexOf(search) !== -1;
  }
}
0 голосов
/ 03 июля 2018

Глядя на исходный код , я думаю, что вы действительно хотите custom-filter в отличие от filter: 

(items: object[], search: string, filter: Filter): object[]

Таким образом, вы должны определить функцию и передать ее в качестве аргумента свойству custom-filter таблицы. При поиске вам предоставляются все элементы таблицы, представленные массивом объектов (object[]), строкой поиска, которая была введена в поле поиска, и функцией фильтра для применения ко всем объектам в массиве, так: 

:custom-filter="filterItems"

filterItems(items, search, filter) {
    items.filter(r => filter(r.calories > search))
}

Вышесказанное, конечно, просто очень элементарный пример.

...