如何使用“自定义过滤器"?vuetify中数据表中的道具?或如何创建自定义过滤器以按标题过滤? [英] How do I use "custom filter" prop in data tables in vuetify? or How do I create a custom filter to filter by headers?

问题描述

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

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

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

1. Bakchoi(蔬菜)
2. 猪肉(肉)
3. 鸡大腿(肉)
4. 西瓜(水果)

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

解决方案

看Github上的代码¹，貌似是用customFilter prop覆盖用于确定 filter 属性如何应用于表中的项目的默认方法.

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

<块引用>

customFilter: {类型:函数，默认值:(项目、搜索、过滤器)=>{搜索 = search.toString().toLowerCase()return items.filter(i => (Object.keys(i).some(j => filter(i[j], search))))}},

如果您想阻止任何列包含在过滤器中，或者如果您一直希望阻止过滤掉特定行，则可能需要覆盖此函数.

您会注意到该方法还依赖于 search 属性，它必须是一个字符串.

<小时>

说了这么多，你真的不需要使用那个道具来做你想做的事.您应该只创建一个计算属性来根据您的下拉值过滤项目，并将该计算属性作为 items 属性传递.

这是一个例子:

new Vue({埃尔:'#app'，数据() {返回 {食物: [{名称:'Bakchoi'，类型:'蔬菜'，卡路里:100}，{名称:'猪肉'，类型:'肉'，卡路里:200}，{名称:'鸡大腿'，类型:'肉'，卡路里:300}，{名称:'西瓜'，类型:'水果'，卡路里:10}，],标题:[{ 文本:名称"，对齐:左"，值:名称"}，{ text: '食物类型', align: 'left', value: 'type' },{ 文本:卡路里"，对齐:左"，值:卡路里"}，],食物类型:空，};},计算:{过滤项目(){返回 this.food.filter((i) => {返回 !this.foodType ||(i.type === this.foodType);})}}})

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></脚本><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|材料+图标"><div id="app"><v-app>

<小时>

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

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

1. Bakchoi (vegetable)
2. Pork (meat)
3. Chicken Thigh (meat)
4. watermelon (fruit)

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

解决方案

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.

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.

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

---

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.

Here's an example:

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>

---

1. 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中数据表中的道具?或如何创建自定义过滤器以按标题过滤?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！