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

Working SandBox Example

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>

本地搜索v-data-table Vuetify

2 个答案: