Vuetify 自定义过滤器

Question

您好，我的表格需要一个自定义过滤器，但我不知道该怎么做。

我目前有以下代码可以工作：

    customFilter(value, search) {
          return (
            value != null &&
            search != null &&
            typeof value === "string" &&
            value.toString().toLocaleLowerCase().indexOf(search) !== -1
          );
    }

但我也需要遍历一个包含一个对象的数组：您可以在此处查看我的数据结构：

      invoiceID: "",
      client: [
        {
          _id: "",
          salutation: "",
          companyname: "",
          firstname: "",
          lastname: "",
          street: "",
          housenumber: "",
          zipCode: "",
          place: "",
        },
      ],
      buildingProject: "",
      place: "",
      servicetext: "",
      paid: "",
      transferred: 0,

我可以搜索除客户端之外的任何内容。客户端数组总是大一号。该函数需要返回一个布尔值。

Answer 1

注意：我假设您有一个 v-textfield 绑定到用于过滤表的某个变量（可能名为 search）。

这是我的解决方案：

所以基本上，custom-filter 可以返回第三个参数（在此示例中为item），它返回具有client 属性的整个对象。然后我们可以搜索它的属性之一是否与我们的搜索字符串匹配。

<v-text-field v-model="search" placeholder="Type something to search"></v-text-field>
<v-data-table
  :headers="headers"
  :items="invoices"
  :search="search"
  :custom-filter="customFilter"
></v-data-table>

customFilter(value, search, item) {
  // find the search string if it exist in client
  const client = item.client[0];
  const clientKeys = Object.keys(client);
  const hasClientMatch = clientKeys.some(
    key =>
      client[key]
        .toString()
        .toLocaleLowerCase()
        .indexOf(search) !== -1
  );

  return (
    value != null &&
    search != null &&
    typeof value === "string" &&

    // Return the item if it matched somewhere on client, 
    // OR if it matched certain values displayed on the table.
    (hasClientMatch ||        
      value
        .toString()
        .toLocaleLowerCase()
        .indexOf(search) !== -1)
  );
}

Here is a sample demo on codesandbox.