如何使 VuetifyJS 中数据 table 的扩展槽中的内容可搜索？

Question

我正在使用 VuetifyJS/VueJS data table with an expand slot。如何使扩展槽中的内容可搜索？我尝试将内容包装在 <td></td> 中，但这没有用。

这是一个代码笔示例：https://codepen.io/anon/pen/VBemRK?&editors=101 如果您搜索 "find me"，结果总是 Your search for "find me" found no results.

      <v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
    item-key="name"
  >

<template slot="items" slot-scope="props">
  <tr @click="props.expanded = !props.expanded">
      <td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>

     <template slot="expand" slot-scope="props">
  <v-card flat>
    <v-card-text><td>Peek-a-boo! Please find me too.</td></v-card-text>
  </v-card>
         </template> 

    <v-alert slot="no-results" :value="true" color="error" icon="warning">
      Your search for "{{ search }}" found no results.
    </v-alert>
  </v-data-table>

Answer 1

使用自定义过滤器。

首先，创建自定义过滤方法：

methods: {
    customFilter(items, search) {
      return items.filter(dessert => JSON.stringify(dessert).toLowerCase().indexOf(search.toLowerCase()) !== -1)
    }
}

然后将 :custom-filter="customFilter" 添加到 v-data-table:

<v-data-table
    :headers="headers"
    :custom-filter="customFilter"
    :items="desserts"
    :search="search"
    item-key="name"
>

查看更新后的代码笔： https://codepen.io/WisdomSky/pen/PBNvYY

Answer 2

自 Vuetify 版本 >= 2 起，您将需要使用具有新模式的 custom-filter 道具。

export default {
  methods: {
    customDataTableItemsFilter(value, search, items) {
      /*
      Filter for individual words in search string. Filters
      all object values rather than just the keys included
      in the data table headers.
       */
      const wordArray = search
        .toString()
        .toLowerCase()
        .split(' ')
        .filter(x => x)
      return wordArray.every(word =>
        JSON.stringify(Object.values(items))
          .toString()
          .toLowerCase()
          .includes(word)
      )
    }
  }
}

如何使 VuetifyJS 中数据 table 的扩展槽中的内容可搜索？

How to make content in an expand slot of a data table in VuetifyJS searchable?

javascript

datatable

full-text-search

vue.js

vuetify.js