如何使用“自定义过滤器"支撑在数据表中的vuetify?或如何创建自定义过滤器以按标题过滤?

问题描述：

截至发布之日，我找不到任何文档可以在数据表中使用自定义过滤器"道具.

As of date of posting, I cannot find any documentation to use the "custom filter" prop in data tables.

我只想创建一个自定义过滤器以按标题过滤我的数据表. 我有一个下拉菜单，当用户单击下拉菜单的选项之一时，它将为一个特定标题过滤列表.

I just want to create a custom filter to filter my data table by headers. I have a dropdown, and when user click on one of the options for the dropdown, it will filter the list for one specific header.

示例: 下拉选项: 食物类型:水果，肉，蔬菜

Example: Dropdown options: Food type: fruit, meat, vegetable

Bakchoi(蔬菜)
猪肉(肉)
鸡大腿(肉)
西瓜(水果)

如果我选择下拉菜单作为肉类，则应该只显示猪肉和鸡大腿.

If I select dropdown as meat, it should only show me pork and chicken thigh.

答

查看Github ¹上的代码，看来customFilter道具用于覆盖用于确定默认值的默认方法filter道具如何应用于表格中的项目.

Looking at the code on Github¹, it looks like the customFilter prop is used to overwrite the default method used to determine how the filter prop is applied to the items in the table.

默认的customFilter方法将filter函数应用于每个项目对象的每个属性名称，并过滤掉不包含通过过滤器的一个属性名称的所有项目:

The default customFilter method applies the filter function to each property name of each item object and filters out any items that don't include one property name that passes the filter:

customFilter: {
  type: Function,
  default: (items, search, filter) => {
    search = search.toString().toLowerCase()
    return items.filter(i => (
      Object.keys(i).some(j => filter(i[j], search))
    ))
  }
},

如果要防止过滤器中包含任何列，或者一直希望防止过滤出某些特定行，则可能要覆盖此功能.

You might want to overwrite this function if you wanted to prevent any columns from being included in the filter or if there were specific rows that you always wanted to prevent from being filtered out.

您会注意到，该方法还取决于search道具，该道具必须是字符串.

You'll notice that the method also depends on the search prop, which must be a string.

所有这些，您确实不需要使用该道具来完成您想做的事情.您应该只创建一个计算属性，以根据您的下拉值过滤项目，并将该计算属性作为items属性传递.

All that said, you really don't need to use that prop for what you want to do. You should just make a computed property to filter the items based on your dropdown value and pass that computed property as the items prop.

这是一个例子:

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' },
      ],
      foodType: null,
    };
  },
  computed: {
    filteredItems() {
      return this.food.filter((i) => {
        return !this.foodType || (i.type === this.foodType);
      })
    }
  }
})

<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="foodType"
    ></v-select>
    
    <v-data-table 
      :headers="headers"
      :items="filteredItems"
      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>

此答案是在Vuetify达到v0.15.2时编写的. 该版本的VDataTable组件的源代码可以在这里找到.

This answer was written when Vuetify was at v0.15.2. The source code for the VDataTable component at that version can be found here.

如何使用“自定义过滤器"支撑在数据表中的vuetify?或如何创建自定义过滤器以按标题过滤?

相关推荐