Question

在数据表中，我只想显示属性“ 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 ???;
    }
  }

Answer 1

Looking at the source code，我认为您真的想要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))
}

以上当然只是一个非常基本的例子。

Answer 2

我在这个问题上苦苦挣扎了很长时间，因为我还认为：filter无效。后来，经过一番痛苦，我意识到我需要一个：search道具才能使用：filter，我想要的功能不是Vuetify提供的功能。

与您一样，我想使用返回布尔值的函数来过滤我的数据表，即：如果应该显示行，则为true。

如果有人正在寻找一种快速的解决方案来做同样的事情，那么简单的“ v-if”应该可以解决问题。根据上面的示例：

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

当然，还有其他解决方案，具体取决于您的需求，例如在desserties数组本身上使用.filter方法。

在我的情况下，因为我想始终一次在数据表中显示5行（不使用隐藏动作），所以最终使用了created（）生命周期钩子，而不是v-if：< / p>

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

}，

Answer 3

对于道具，过滤器，这应该有所帮助：

methods: {
  filterItems(val, search) {
    return val != null && typeof val !== 'boolean' && val.toString().toLowerCase().indexOf(search) !== -1;
  }
}

Answer 4

这是我想出的解决方案。我遇到了一个类似的问题，我想实现一个仍可与搜索一起使用的自定义过滤器。我最终使用了一个计算属性，该属性将过滤器应用于数据，并且该计算属性就是发送到表的内容。

computed: {
  dataListDisplay: function() {
    return this.applyFilters(this.dataList);
  },
}

dataListDisplay是您发送到v-data-table项目prop的内容。并且您将需要按自己的意愿实现applFilters函数。

我的表是只读的。我想如果您要更改数据，您将必须小心。您可能需要为dataListDisplay计算函数提供设置器。

Vuetify：如何在v-data-table中过滤数据？

4 个答案: