本地搜索 v-data-table Vuetify

Question

我有一個對象數組： productos[] ，我用它來填充v-datatable 。

我一直在嘗試添加搜索texfield ，如Vuetify文檔所述。 我已經添加了這個，但它只適用於（出於某種原因）帶有數字的標題，並且它不起作用，例如當你輸入一個字符串時。

我想我做錯了什么。

搜索文本字段：

  <v-text-field
   v-model="search"
   append-icon="search"
   label="Search"
    single-line
    hide-details
 ></v-text-field>

v-數據表

   <v-data-table
          :headers="headers"
          :items="productos"
          :search="search"
          hide-actions
          class="elevation-1"
        >
          <template slot="items" slot-scope="props">
            <td class="text-xs-left">{{ props.item.ListadoProductoId }}</td>
            <td class="text-xs-left">{{ props.item.ListadoProducto.nombre }}</td>
            <td class="text-xs-left"> ${{ props.item.ListadoProducto.precio }}</td>
            <td class="text-xs-left">{{ props.item.disponible }}</td>
            <td class="text-xs-left">{{ props.item.ListadoProducto.lim_falt }}</td>
            <td class="text-xs-left">{{ props.item.ListadoProducto.lim_exc }}</td>
</v-data-table>

標題和其他一些腳本：

export default {
  data () {
    return {
      error: null,
      search: '',
      headers: [
        {text: 'ID_PROD', value: 'ListadoProductoId', sortable: false},
        {text: 'Nombre', value: 'nombre'},
        {text: 'Precio', value: 'precio'},
        {text: 'Disponible (u)', value: 'disponible'},
        {text: 'Limite faltantes', value: 'lim_falt'},
        {text: 'Limite excedentes', value: 'lim_exc'}
      ]
    }
  }
}

Productos 數組示例：

  productos: [
    {
      ListadoProducto: {
        id: 5,
        lim_exc: 5000,
        lim_falt: 200,
        nombre: "Algo",
        precio: 300
      },
      ListadoProductoId: 5,
      disponible: 100,
      id: 5
    },
    {
      ListadoProducto: {
        id: 6,
        lim_exc: 1000,
        lim_falt: 200,
        nombre: "Bgo",
        precio: 450
      },
      ListadoProductoId: 6,
      disponible: 0,
      id: 6
    }
  ]

圖片：無需搜索

用數字搜索（它與第一個標題匹配）

用字符串搜索（我無法讓它與第二個標題匹配，即）

Answer 1

如果您的對象值是嵌套的，您必須告訴v-data-table標頭。

假設您的對象結構是：

{
  ListadoProducto: {
    id: 5,
    lim_exc: 5000,
    lim_falt: 200,
    nombre: "Algo",
    precio: 300
  },
  ListadoProductoId: 5,
  disponible: 100,
  id: 5
}

在標題中指定嵌套節點，例如value: 'ListadoProducto.nombre' ，這樣，搜索就知道您的對象不是平面的。

headers: [
    {text: 'ID_PROD', value: 'ListadoProductoId', sortable: false},
    {text: 'Nombre', value: 'ListadoProducto.nombre'},
    {text: 'Precio', value: 'ListadoProducto.precio'},
    {text: 'Disponible (u)', value: 'disponible'},
    {text: 'Limite faltantes', value: 'ListadoProducto.lim_falt'},
    {text: 'Limite excedentes', value: 'ListadoProducto.lim_exc'}
]

工作沙盒示例

Answer 2

問題出在您的productos數組結構中，搜索不會深入到您的項目中：

如果您有具有以下屬性的項目：

item: {
  id: 1,
  address: "adr 1",
  name: {
    first: "John",
    last: "Doe"
  }
}

它只能到達id和address而不能到達first和last屬性，如果您希望所有屬性都可搜索，則您的項目應具有如下結構：

item: {
  id: 1,
  address: "adr 1",
  firstname: "John",
  lastname: "Doe"

}

在下面的代碼片段中，我更改了您的productos數組結構，它工作正常，運行它以查看：

 new Vue({ el: '#app', data: { error: null, search: '', productos: [{ id: 5, lim_exc: 5000, lim_falt: 200, nombre: "Algo", precio: 300, ListadoProductoId: 5, disponible: 100, id: 5 }, { id: 6, lim_exc: 1000, lim_falt: 200, nombre: "Bgo", precio: 450, ListadoProductoId: 6, disponible: 0, id: 6 } ], headers: [{ text: 'ID_PROD', value: 'ListadoProductoId', sortable: false }, { text: 'Nombre', value: 'nombre' }, { text: 'Precio', value: 'precio' }, { text: 'Disponible (u)', value: 'disponible' }, { text: 'Limite faltantes', value: 'lim_falt' }, { text: 'Limite excedentes', value: 'lim_exc' } ] } })

 <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field> <v-data-table :headers="headers" :items="productos" :search="search" hide-actions class="elevation-1"> <template slot="items" slot-scope="props"> <td class="text-xs-left">{{ props.item.ListadoProductoId }}</td> <td class="text-xs-left">{{ props.item.nombre }}</td> <td class="text-xs-left"> ${{ props.item.precio }}</td> <td class="text-xs-left">{{ props.item.disponible }}</td> <td class="text-xs-left">{{ props.item.lim_falt }}</td> <td class="text-xs-left">{{ props.item.lim_exc }}</td> </template> </v-data-table> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> </body> </html>