Search a non visible field in Vuetify-js Datatable

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/62940776/search-a-non-visible-field-in-vuetify-js-datatable