vue.js

<template>
    <v-layout row wrap>
        <v-flex xs3>
            <v-text-field
                    append-icon="search"
                    label="Buscar por Referencia"
                    single-line
                    hide-details
                    @input="filterSearch"
            ></v-text-field>
        </v-flex>

        <v-flex xs3>
            <v-select
                    :items="authors"
                    label="Tipo Producto"
                    @change="filterAuthor"
            ></v-select>
        </v-flex>

        <v-flex xs25>
            <v-data-table class="table"
                    :headers="headers"
                    :items="rows"
                    item-key="name"
                    :search="filters"
                    :custom-filter="customFilter"
            >
                <template slot="headers" slot-scope="props">
                    <tr>
                        <th v-for="header in props.headers" :key="header.text">
                            {{ header.text }}
                        </th>
                    </tr>
                </template>

                <template slot="items" slot-scope="props">
                    <tr>
                        <td>{{ props.item.REFER}}</td>
                        <td >{{ props.item.NOMMARCA }}</td>
                        <td >{{ props.item.TIPOPRODU}}</td>
                        <td >{{ props.item.TELA}}</td>
                        <td >{{ props.item.NOMTALLE}}</td>
                        <td >{{ props.item.NOMCOLOR}}</td>
                        <td >{{ props.item.LISTA1}}</td>
                        <td >{{ props.item.SbPalma}}</td>
                        <td>{{ props.item.SbKm5I}}</td>
                        <td >{{ props.item.SbKm5II}}</td>
                        <td>{{ props.item.CpMall}}</td>
                        <td >{{ props.item.SbVillaMorra}}</td>
                        <td >{{ props.item.SbCDE}}</td>
                        <td >{{ props.item.SbPaseo}}</td>
                        <td >{{ props.item.SbMcal}}</td>
                        <td >{{ props.item.CpLuque}}</td>
                        <td>{{ props.item.SbMariano}}</td>
                        <td >{{ props.item.SbPinedo}}</td>
                        <td >{{ props.item.SbLambare}}</td>
                        <td>{{ props.item.SbSanLorenzo}}</td>
                        <td >{{ props.item.SbFuente}}</td>
                        <td>{{ props.item.SbAzara}}</td>
                        <td >{{ props.item.DEPOSITO}}</td>
                    </tr>
                </template>
            </v-data-table>
        </v-flex>
    </v-layout>
</template>


<script>
  import axios from 'axios'
  export default {
    data: () => ({
      filters: {
        search: '',
        added_by: '',
      },

      authors: ['LIN', 'OUT','LIN/OUT'],
      headers: [
        {
          text: 'Referencia',
          width: 10,
          align: 'left',
          value: 'REFER',
          sortable: true
        },
        {
          text: 'Marca',
          width: 10,
          value: 'NOMMARCA',
          align: 'left',
          sortable: true
        },
        {
          text: 'Tipo Producto',
          width: 10,
          value: 'TIPOPRODU',
          align: 'left',
          sortable: true
        },
          {
          text: 'Tela',
          width: 10,
          value: 'TELA',
          align: 'left',
          sortable: true
        },
          {
          text: 'Talle',
          width: 10,
          value: 'NOMTALLE',
          align: 'left',
          sortable: true
        },
          {
          text: 'Color',
          width: 10,
          value: 'NOMCOLOR',
          align: 'left',
          sortable: true
        },
          {
          text: 'Precio Lista',
          width: 10,
          value: 'LISTA1',
          align: 'left',
          sortable: true
        },
          {
          text: 'Palma',
          width: 10,
          value: 'SbPalma',
          align: 'left',
          sortable: true
        },
         {
          text: 'KM5 I',
          width: 10,
          value: 'SbKm5I',
          align: 'left',
          sortable: true
        },
        {
          text: 'KM5 II',
          width: 10,
          value: 'SbKm5II',
          align: 'left',
          sortable: false
        },
         {
          text: 'Mall',
          width: 10,
          value: 'CpMall',
          align: 'left',
          sortable: false
        },
         {
          text: 'Villa Morra',
          width: 10,
          value: 'SbVillaMorra',
          align: 'left',
          sortable: false
        },
         {
          text: 'CDE',
          width: 10,
          value: 'SbCDE',
          align: 'left',
          sortable: false
        },
         {
          text: 'Paseo',
          width: 10,
          value: 'SbPaseo',
          align: 'left',
          sortable: false
        },
         {
          text: 'Mcal',
          width: 10,
          value: 'SbMcal',
          align: 'left',
          sortable: false
        },
          {
          text: 'Luque',
          width: 10,
          value: 'CpLuque',
          align: 'left',
          sortable: false
        },
          {
          text: 'Mariano',
          width: 10,
          value: 'SbMariano',
          align: 'left',
          sortable: false
        },
          {
          text: 'Pinedo',
          width: 10,
          value: 'SbPinedo',
          align: 'left',
          sortable: false
        },
          {
          text: 'Lambare',
          width: 15,
          value: 'SbLambare',
          align: 'left',
          sortable: false
        },
        {
          text: 'San Lorenzo',
          width: 15,
          value: 'SbSanLorenzo',
          align: 'left',
          sortable: false
        },
        {
          text: 'Fuente',
          width: 15,
          value: 'SbFuente',
          align: 'left',
          sortable: false
        },
        {
          text: 'Azara',
          width: 15,
          value: 'SbAzara',
          align: 'left',
          sortable: false
        },
         {
          text: 'Central',
          width: 15,
          value: 'DEPOSITO',
          align: 'left',
          sortable: false
        },

      ],
      rows: [],
      url: 'http://192.168.0.169:8000/queryprueba/oinv.xsjs',
    }),

    mounted () {
    this.leerAPI()
    },

    methods: {
      leerAPI (){
        axios.get(this.url, {

        }).then(response => {
          this.rows = response.data

        }).catch(error => {
          console.log(error)
        })

      },

      customFilter(items, filters, filter, headers) {
        // Init the filter class.
        const cf = new this.$MultiFilters(items, filters, filter, headers);

        cf.registerFilter('search', function (searchWord, items) {
          if (searchWord.trim() === '') return items;

          return items.filter(item => {
            return item.name.toLowerCase().includes(searchWord.toLowerCase());
          }, searchWord);

        });

        cf.registerFilter('added_by', function (TIPOPRODU, item) {
          if (TIPOPRODU.trim() === '') return items;

          return items.filter(item => {
            return items.TIPOPRODU.toLowerCase() === TIPOPRODU.toLowerCase();
          }, added_by);

        });

        // Its time to run all created filters.
        // Will be executed in the order thay were defined.
        return cf.runFilters();
      },


      /**
       * Handler when user input something at the "Filter" text field.
       */
      filterSearch(val) {
        this.filters = this.$MultiFilters.updateFilters(this.filters, {search: val});
      },

      /**
       * Handler when user  select some author at the "Author" select.
       */
      filterAuthor(val) {
        this.filters = this.$MultiFilters.updateFilters(this.filters, {TIPOPRODU: val});
      },

    }

  };
</script>