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

我有一个Vuetify数据表组件，其中显示了一个项目数组。发生的事情是，这个项目数组中有另一个数组，我使用一个模板标记来迭代信息，并将其放在一列中。 请参阅下面的代码

<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>

这里我想要的是，当前正在搜索的名称/用户名/办公室。。。字段，也适用于“部门”列中的部门数组。当我开始搜索任何部门时，它只是不返回任何内容

我正在使用的完整json对象的示例

{
"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

},

---

如何使此搜索工作正常？

您可以像这样使用

自定义筛选器

 <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))
      }
  },


...
方法：{
自定义搜索（值、搜索、项目）{
if（数组.isArray（值））{
返回值.some（item=>Object.values（item）.some（v=>v&&v.toString（）.toLowerCase（）.includes（搜索）））
}
返回Object.values（item）.some（v=>v&&v.toString（）.toLowerCase（）.includes（搜索））
}
},

演示：
当然，我用一个json对象的例子编辑了这个问题，我正在表上显示信息。我没有显示所有的信息，只是显示对我正在处理的视图有意义的信息。但当用户与多个dptThanks Zim有关系时，我需要显示部门名称。这正是解决问题的方法
 <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))
      }
  },