<v-card-title>
    <v-text-field
        v-model="search"
        label="Search Product Name"
        single-line
        hide-details
    ></v-text-field>
</v-card-title>
<v-data-table
    :headers="headers"
    :items="this.$store.getters['options/getAllAvailableProducts']"
    :items-per-page="10"
    :search="search"
    class="elevation-1"
>
</v-data-table>


///

data() {
    return {
        dialog: this.$store.getters['liveDashboard/getShowDynamicSelectionModal'],
        search: '',
        headers: [
            { text: 'Image',
              value: 'thumb',
              sortable: false,
            },
            {
              text: 'Product',
              sortable: true,
              value: 'product_name',
            },
            {
              text: 'Price',
              sortable: false,
              value: 'inventory_min',
            },
            {
              text: 'Inventory',
              sortable: true,
              value: 'inventory_quantity',
            },
            {
              text: '',
              sortable: true,
              value: 'inventory_id',
            },
        ],
    }
},

J'ai une table de données remplie par products. Un seul product comporte plusieurs champs :

Exemple:

La valeur de this.$store.getters['options/getAllAvailableProducts'] est un tableau de produits.

   [
     {
       'product_name': "test test",
       'sku': "145534",
       'brand': "Nike",
       'inventory_id': 4,
       'inventory_min': 44,
       'inventory_quantity': 2,
     },
     {
       'product_name': "new product",
       'sku': "5534545",
       'brand': "Nike test",
       'inventory_id': 5,
       'inventory_min': 512,
       'inventory_quantity': 44, 
     }
   ]

À l'heure actuelle, saisir le nom du produit fait apparaître les produits qui correspondent au nom, mais je veux que la saisie du nom, de la référence ou de la marque fasse apparaître tous les produits correspondants.

Donc, taper "test" ferait apparaître ces deux produits puisque le premier produit a "test" dans le champ name et le 2ème produit a "test" dans le nom brand.

0
ddjk 3 nov. 2020 à 20:57

1 réponse

Meilleure réponse

La table de données de Vuetify ne peut être recherchée que sur les champs définis dans la prop headers.

Cependant, vous pouvez le faire rechercher dans tous les champs en utilisant un custom-filter...

<v-card>
  <v-card-title>
    <v-text-field
      v-model="search"
      label="Search"
      single-line
      hide-details
    ></v-text-field>
  </v-card-title>
  <v-data-table
      :headers="headers"
      :items="items"
      :search="search"
      :custom-filter="customSearch"
   >
   </v-data-table>
</v-card>


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

Démo

J'ai répondu à une question similaire ici .

1
Zim 3 nov. 2020 à 18:42