如何为 vuetify 数据表创建多个下拉选择过滤器答案

【问题标题】：how to create multiple dropdown select filter for vuetify data table如何为 vuetify 数据表创建多个下拉选择过滤器
【发布时间】：2020-12-16 14:07:43
【问题描述】：

我正在尝试为 v-data-table 创建过滤器

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'start',
            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: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%',
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%',
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%',
          },  
        ],
      }
    },
  }
</script>

我想创建一个包含多个输入的过滤器，我可以在其中选择字段、提供阈值输入和选择上方/下方阈值，然后应用此过滤器以获取过滤后的表

有人可以帮我解决这个问题吗？我对 vue 和 vuetify 很陌生，我真的很挣扎

提前谢谢你。如果您需要任何进一步的信息，请告诉我

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

您可以在数据中添加一些控件来绑定到您的输入，例如：

filterType: 'calories',
isAbove: false,
threshold: 12,
filteredDesserts: [],

那么您需要一个在“应用”按钮单击时调用的方法：

applyFilters() {
  this.filteredDesserts = this.desserts.filter(el => {
    if (this.isAbove) return el[this.filterType] > this.threshold;
    else return el[this.filterType] < this.threshold;
  });
}

现在您需要做的就是将filteredDesserts 绑定到v-data-table 的items 属性，例如:items="filteredDesserts

你还需要一个像这样删除过滤器的方法（你还需要模板中的删除过滤器按钮来调用这个方法）：

removeFilter() {
  this.filteredDesserts = this.desserts;
}

通过调用此函数，所有项目都会再次显示。同样，当您的页面加载时，用desserts 数据填充filteredDesserts，例如：

created() {
  this.filteredDesserts = this.desserts;
}

所以当页面加载时所有数据都显示在表格中。

您也可以编写一个逻辑来使用computed 进行过滤，但由于您有一个apply 按钮，所以我使用这种方法仅通过单击按钮来实现过滤

【讨论】：