本地搜索 v-data-table Vuetify答案

【问题标题】：Local search v-data-table Vuetify本地搜索 v-data-table Vuetify
【发布时间】：2019-03-21 13:28:53
【问题描述】：

我有一个对象数组：productos[]，我用它来填充v-datatable。

我一直在尝试添加搜索 texfield，如 Vuetify 文档所述。我已经添加了这个，但它只适用于（出于某种原因）带有数字的标题，并且它不起作用，例如当你输入一个字符串时。

我觉得我做错了什么。

搜索文本字段：

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

v-datatable

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

图片： 无需搜索

用数字搜索（与第一个标题匹配）

使用字符串搜索（我无法将它与第二个标题匹配，即）

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

问题出在您的 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"

}

在下面的 sn-p 中，我更改了您的 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>

【讨论】：

【解决方案2】：

如果你的对象值是嵌套的，你必须告诉v-data-table headers。

假设你的对象结构是：

{
  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'}
]

Working SandBox Example

【讨论】：