本地搜索 v-data-table Vuetify
Posted
技术标签:
【中文标题】本地搜索 v-data-table Vuetify【英文标题】：Local search 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
]
图片： 无需搜索
用数字搜索（与第一个标题匹配）
使用字符串搜索（我无法将它与第二个标题匹配，即）
【问题讨论】：
【参考方案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
【讨论】：
以上是关于本地搜索 v-data-table Vuetify的主要内容，如果未能解决你的问题，请参考以下文章
合并 2 个值并放入 v-data-table 列（Vuetify）
如何清除 v-data-table 中的选定行，Vuetify