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

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

1 个答案: