当列数据也是数组时如何在数据表中应用Vuetify搜索

Question

I have a Vuetify data table component with an array of items being showed. What happens is that this array of items, have another array inside that i use a template tag to iterate over the info and put this in just one column. See code below

<v-text-field
      v-model="searchManagers"
      append-icon="mdi-magnify"
      label="Pesquisar"
      single-line
      hide-details
    ></v-text-field>
  </v-card-title>
  <v-data-table
    :headers="headersManagers"
    :items="managers"
    :search="searchManagers"
    class="elevation-1"
  >
   //ATTENTION TO THIS PART HERE
    <template v-slot:item.departments="{item}">
      <p class="mt-2" v-for="(dpt, index) in item.departments" :key="index">{{dpt.name}}</p>
    </template>
    ----------------------------------------
    <template v-slot:item.status="{item}">
      <span v-if="item.status">
        <v-chip label outlined color="success">Ativo</v-chip>
      </span>
      <span v-else>
        <v-chip label outlined color="error">Inativo</v-chip>
      </span>
    </template>

    <template v-slot:item.action="{ item }">
      <v-btn fab small color="primary" text>
        <v-icon @click="editItem(item)">mdi-pencil-outline</v-icon>
      </v-btn>

      <v-btn fab small color="error" text>
        <v-icon @click="deleteItem(item)">mdi-delete-outline</v-icon>
      </v-btn>
    </template>
    <template v-slot:no-data>
      <v-alert class="mt-4" color="primary" dark :value="true">
        <v-icon x-large>mdi-emoticon-sad-outline</v-icon>
        <br />Nenhum Usuário encontrado
      </v-alert>
    </template>
  </v-data-table>

And here is my headers for this table

headersManagers: [
  { text: "Nome", align: "left", value: "fullName" },
  { text: "Nome de usuário", align: "center", value: "username" },
  { text: "Unidade", align: "center", value: "office" },
  { text: "Setor", align: "center", value: "departments" },
  { text: "Perfil", align: "center", value: "profile.name" },
  { text: "Status", align: "center", value: "status" },
  { text: "Ações", align: "center", value: "action", sortable: false }
],

What i want here, is that the search that is currently working for the name/username/office... fields, also works for the array of departments in the departments column. When I start to search for any department, it just simply doesn't return anything.

Example of the full json object i'm using

{
"id": "bf6dbc41-4eca-42c4-ab3b-e4ada4aa671b",
"firstName": "name",
"lastName": "last name",
"username": "a.user",
"fullName": "name last name",
"email": "email@email.com",
"photoUrl": "http://some_url.com",
"personalPhone": "9999",
"workPhone": "9999",
"admissionDate": "2012-05-02T00:00:00",
"office": "office",
"jobTitle": "example",
"departments": [
  {
    "departmentId": "04aa5418-b217-4bca-9cf3-f77725508980",
    "name": "department name",
    "director": "director name"
  },
  {
    "departmentId": "12602b8b-68ea-4539-b95e-01968c74247d",
    "name": "other department name",
    "director": "director name"
  }
],
"status": true,
"country": null,
"city": null,
"neighborhood": null,
"addressNumber": 0,
"street": null,
"postalCode": null,
"profile": {
  "id": "35631c5d-3269-4db9-98c8-e9896961e537",
  "name": "example"
},
"createdAt": "2020-07-06T17:44:05.024359",
"isManager": true,
"isDirector": false

},

How can i make this search work?

Answer 1

You can use a custom-filter like this...

 <v-data-table
    :headers="headers"
    :items="items"
    :search="search"
    :custom-filter="customSearch"
    class="elevation-1"
 >
    ...
 </v-data-table> 


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

Demo: https://codeply.com/p/ziCJy4J8rL