로컬 검색 v-data-table Vuetify

로컬 검색 v-data-table Vuetify

다양한 오브젝트가 있습니다.productos[], 이것을 사용하고,v-datatable.

검색을 추가하려고 했습니다.texfield예를 들어Vuetify설명서에 기재되어 있습니다.추가했지만 숫자가 있는 헤더에서만 작동하며 예를 들어 문자열을 입력할 때 작동하지 않습니다.

내가 뭔가 잘못하고 있는 것 같아.

검색 텍스트 필드:

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

v-datable

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

사진: 검색 안 함

숫자로 검색(첫 번째 헤더와 일치)

문자열로 검색(두 번째 헤더와 일치시킬 수 없습니다.)

말해줘야지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'}
]

작업 중인 SandBox의 예시

문제는 고객님의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>

언급URL : https://stackoverflow.com/questions/52845201/local-search-v-data-table-vuetify