Question

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

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

from copy import copy

cmap = copy(plt.get_cmap('hot'))
cmap.set_under('grey')
cmap.set_over('steelblue')
cmap.set_bad('green')

im = ax.imshow(np.where(harvest <= 1, harvest, np.nan), cmap=cmap, vmin=0.000001, vmax=0.999999)

plt.colorbar(im, extend='both', extendrect=True, ticks=np.arange(0, 1.01, .1), ax=ax)

但是我也需要遍历一个对象的数组：您可以在这里看到我的数据结构：

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

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

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。

Vuetify自定义过滤器

1 个答案: