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

Question

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

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

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

我的问题是 search 指令仅在标题中声明的字段(5 列)中搜索，而我需要在其他字段中搜索。

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

我还尝试了custom-filter来使用我自己的函数，但每个 header 字段调用一次，而不是每行调用一次(我可以访问其余字段)。

关于如何做到这一点有什么建议吗？ 谢谢。

Answer 1

您可以使用自定义过滤器...

 <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