How to add individual filters for data-table in vuetify?

问题

I've a data table <v-data-table> that has tons of records and have 7 columns. Vuetify's data table has one filter for all of them and it is working, but I want individual filter for all of the columns.

I'm getting the data from the backend using axios, then filter the data, push it into an array and then display it in the table.

How do I go about that?

I'm new at Vue, and I am not working with Vuex for this project. I've looked at other questions on stack-overflow but they are mostly talking about custom filters.

<v-data-table :headers="headers" :items="this.results" :search="search" :date="this.date">
     <template v-slot:items="props" v-slot:date="props">
        <tr>
          <td>{{ props.item.time }}</td>
          <td>{{ props.item.station }}</td>
          <td>{{ props.item.number }}</td>
          <td>{{ props.item.name }}</td>
          <td><v-icon color="red">clear</v-icon></td>
          <td> <v-btn small flat color="info" @click="openModal(props.item)">Show Results</v-btn></td>
        </tr>
      </template>

<!--  These are the filters for individual columns. Shown only two for brevity. -->

      <template v-slot:footer>
         <td>
           <v-text-field
             v-model="search"
             prepend-inner-icon="schedule"
             label="Time"
             size="10"
             single-line
            ></v-text-field>
          </td>
          <td>
            <v-text-field
              v-model="search"
              prepend-inner-icon="ev_station"
              label="Staion"
              single-line
              size="10"
            ></v-text-field>
           </td>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </template>
</v-data-table>

data() {
    return {
      date: [],
      search: '',
    };
  },

来源：https://stackoverflow.com/questions/56065402/how-to-add-individual-filters-for-data-table-in-vuetify

标签

Vue.js

vuetify.js