0

我想为我的 v-data-table （包含书籍）构建一个自定义过滤器

  • 允许通过输入多个空格分隔的搜索词来缩小搜索结果
  • 将带有连字符的复合词分成单独的搜索词
  • 所有搜索词都应出现在项目中，但它们可以出现在不同的列/道具中，因此搜索“tolkien hobbit”会返回一本标题为“The Hobbit”且作者为“JRR Tolkien”的书

我认为在 customFilter 函数中使用“值”将需要所有搜索词出现在同一个道具中，所以我使用了 item 代替，但是 vuetify 将完整的项目提供给过滤器函数，而不仅仅是数据的可过滤标题表，这将产生不需要的搜索结果，所以我重新初始化该项目以摆脱不需要的道具。

methods: {
  customFilter(value, search, item) {
          item = {
            number: item.number,
            title: item.title,               
            author: item.author
          };

          const haystack = Object.values(item).join().toLowerCase();                
          let s = search.toString().toLowerCase(); 
          let needles = s.replace('-',' ').split(' ');

          return needles.filter(needle => haystack.indexOf(needle) >= 0).length == needles.length               
        }
}

我的问题

  • 有没有办法告诉 vuetify 只将可过滤的标题道具作为项目提供给自定义过滤器？
  • 如果没有，有没有比重新初始化更好的方法来摆脱不需要的道具？（使用扩展运算符进行解构也可以，但会更长，并且 eslint 会唠叨未使用的变量）
  • 有没有办法用“价值”而不是“项目”来实现我的要求？（我不明白如何）
4

1 回答 1

0

回答我自己的问题：

  • 不，您不能告诉 vuetify 仅将项目的特定道具传递给自定义过滤器，您只需传递项目对象
  • 我现在通过过滤/减少来摆脱不需要的道具
  • value 只给你一个值，大概它默认为第一列，但我不是 100% 确定

我现在的解决方案：

methods: {
itemFilterMultipleSearchTermsAnd(value, search, item) {     
  const nonSearchableColumns = ["excludedPropName1", "excludedPropName2"];
  const reducedObject = Object.keys(item)
    .filter((key) => !nonSearchableColumns.includes(key))
    .reduce((res, key) => ((res[key] = item[key]), res), {});

  const haystack = Object.values(reducedObject)
    .join()
    .toLowerCase();
  let s = search.toString().toLowerCase();
  let needles = s.replace("-", " ").split(" ");

  return (
    needles.filter((needle) => haystack.indexOf(needle) >= 0).length ==
    needles.length
  );
}

}

于 2021-02-25T08:35:46.103 回答