嗨，

Question

嗨，

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

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

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

感谢您的帮助。

Answer 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" />

如何在Vuetify数据表中检索过滤的项目

嗨，

1 个答案: