时间戳

首页 > 解决方案 > Vuetify - 严格的数据表自定义过滤器

vue.js - Vuetify - 严格的数据表自定义过滤器

问题描述

因此，我有一个数据表，其中对象的名称相似且区分大小写，例如“A”、“Aa”或“a”，但在尝试按这些确切值过滤数据时遇到问题。我正在使用绑定到数据表的搜索属性的 v-select 过滤我的数据。创建自定义过滤器时，我发现的唯一两个选项是通过搜索输入过滤特定列：

customFilter(items, search, filter) {
    search = search.toString().toLowerCase();
    return items.filter(row => filter(row["name"], search));
}

或过滤 Object.keys：

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

随着自定义过滤器的工作方式，我似乎无法使用搜索参数而不将其设为小写，因为删除 .toLowerCase() 会完全破坏它并在 Objects.key 上使用不同的方法，例如 .find() 而不是.some() 结果在选择“A”或“a”时仍会过滤“Aa”项。

有什么方法可以使用自定义过滤器来过滤我的项目，既区分大小写又准确地按字符串？

谢谢！

标签： vue.jsfilterdatatablevuetify.jsstrict

解决方案

事实证明，使用数据表的搜索和自定义过滤器是错误的方式，因为它们太受限制了。我只是将数据表链接到一个单独的数组，当我在 v-select 中选择一个选项时，我自己过滤了这个数组。

推荐阅读