【问题标题】：How to retrieve filtered items in Vuetify Datatable如何在 Vuetify Datatable 中检索过滤的项目
【发布时间】：2020-01-22 16:56:16
【问题描述】：

嗨，

我有一个 vuetify 数据表（后端 Laravel），它在列上有一个过滤器。我需要在数据表中获取过滤后的数据并将其传递给后端以生成pdf。

我尝试在 vuetify 数据表上使用 current-items 事件，但结果不正确。它只在第一页返回过滤后的数据。

这是我的"https://codepen.io/prasadchinwal5/pen/eYmbvYb"。请在卡路里列下的小于过滤器中输入值 500 并检查控制台。

感谢任何帮助。

【问题讨论】：

标签： datatable datatables vuetify.js

【解决方案1】：

您将获取基础数据集并根据 v-data-table 列定义中使用的相同过滤器计算数组。即。

computed:{    
    currentItems(){
      return this.desserts.filter(val=>val.calories < parseInt(this.calories))
    },
   currentItemsWithSearch(){
      return this.currentItems.filter(val=> 'search logic here')
    }       
}

currentItems 值应该与表的数据相匹配。这是应用第二个单独的过滤器，类似于您在列定义上所做的。

 {
          text: 'Calories',
          value: 'calories',
          filter: value => {
            if (!this.calories) return true

            return value < parseInt(this.calories)
          },
        }

理想情况下，您希望使用 currentItems 数组作为数据表项的输入，以考虑“搜索”字段，您可以在计算输出上链接更多过滤器（搜索）。这将在一个地方执行少于卡路里的过滤。

<v-data-table :items="currentItems" />

【讨论】：