在 Vuetify-js 数据表中搜索不可见字段

Question

我正在 Vuetify 中创建一个可扩展的数据表。

表标题中仅显示 5 列。当您展开每一行时，您会使用item.data-table-expand 槽获得详细信息，该槽显示数据数组中可用的更多列。

现在我希望能够在表格上应用搜索过滤器。

我的问题是search指令只在标题中声明的字段（5列）中搜索，我需要在其他字段中搜索。

我尝试在标题中添加一个可搜索字段，但无法隐藏它因此不会显示。

我还尝试使用 custom-filter 来使用我自己的函数，但它每个标题字段调用一次，而不是每行一次（我可以访问其余字段）。

关于如何做到这一点的任何建议？ 谢谢。

Answer 1

您可以使用custom-filter...

 <v-data-table
    :headers="headers"
    :items="desserts"
    :expanded.sync="expanded"
    show-expand
    single-expand
    item-key="name"
    :search="search"
    :custom-filter="customSearch">
  </v-data-table>

  methods: {
    customSearch (value, search, item) {
      return Object.values(item).some(v=>v&&v.toString().toLowerCase().includes(search))
    }
  },

https://codeply.com/p/jraMEhXaCk