在 Vuetify-js 数据表中搜索一个不可见的字段 [英] Search a non visible field in Vuetify-js Datatable

问题描述

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

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

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

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

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

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

关于如何做到这一点的任何建议?谢谢.

解决方案

您可以使用 custom-filter...

 </v-data-table>方法: {customSearch(值，搜索，项目){返回 Object.values(item).some(v=>v&&v.toString().toLowerCase().includes(search))}},

https://codeply.com/p/jraMEhXaCk

I'm creating an expandable datatable in Vuetify.

Only 5 columns are displayed in the table headers. When you expand each line, you get the detailed information, using the item.data-table-expand slot, which shows more columns available in the data array.

Now I want to be able to apply a search filter on the table.

My problem is that the search directive only searchs in the fields declared in the headers (the 5 columns), and I need to search in the other fields.

I tried adding a searchable field in the headers, but there is no way to hide it so it wont be shown.

I also tried the custom-filter to use my own function, but it is called once per header field, not once per row (where I could access the rest of the fields).

Any suggestions on how to do this? Thanks.

解决方案

You can use the 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 数据表中搜索一个不可见的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！