本地搜索 v-data-table Vuetify [英] Local search v-data-table Vuetify

问题描述

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

I've got an array of objects: productos[], I use this to populate the v-datatable.

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

I've been trying to add the search texfield such as the Vuetify documentation says. I've added this but it only works (for some reason) with the headers that has numbers and it doesn't work for example when you type a string.

我觉得我做错了什么.

搜索文本字段:

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

图片:无需搜索

用数字搜索(与第一个标题匹配)

Searching with a number (It match with the first header)

用字符串搜索(我无法让它与第二个标题匹配)

Searching with string (I can't get it match with the second header i.e.)

推荐答案

如果你的对象值是嵌套的，你必须告诉 v-data-table 标题.

You have to tell v-data-table headers if your objects value are nested.

假设您的对象结构是:

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

在标题中指定嵌套节点，例如 value: 'ListadoProducto.nombre'，这样搜索就知道您的对象不是平面的.

Specify nested node in your headers, for example value: 'ListadoProducto.nombre', like that, the search knows that your object is not flat.

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

工作沙盒示例

这篇关于本地搜索 v-data-table Vuetify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！