如何在 vuetify 数据表中添加单个列搜索（文本输入）？答案

【问题标题】：How to add individual column searching (text inputs) in vuetify data table?如何在 vuetify 数据表中添加单个列搜索（文本输入）？
【发布时间】：2019-05-01 07:20:39
【问题描述】：

我想为表格的每一列添加单独的列搜索（文本输入）。我在 vuetify 中找到了它，但没有与此相关的示例。我在下面使用这个代码。

我需要一个如下所示的表格：this datatable

我在主组件中传递这个参数

组件

 <v-data-table
                :headers="complex.headers"
                :search="search"
                :custom-filter="search"
                :items="items"
                :rows-per-page-items = "[1,2]"
                class="elevation-1"
                item-key="name"
                v-model="complex.selected"
                :loading="this.items && this.items.length ? false : true"
                :pagination.sync="pagination"
                :total-items="totalData"
                ></v-data-table>

【问题讨论】：

标签： vue.js vue-component vuetify.js

【解决方案1】：

使用表头插槽。这是一个如何在表格标题下方实现输入文本框的示例。这将在表头中创建两行 - 第一行将包含标题，第二行将包含输入框，其中表头列的可过滤设置为 true。如果要为每一列创建输入框，可以省略 v-show 指令。非常简单的示例，不会为字段生成下拉列表等，但应该给您基本的想法。

<template
    slot="headers"
    slot-scope="props"
>
    <tr>
        <th
            v-for="header in props.headers"
            :key="header.text"
            align="left"
            :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
              @click="changeSort(header.value)"
            >
              <VIcon small>
                arrow_upward
              </VIcon>
              {{ header.text }}
        </th>
    </tr>
    <tr>
        <th
            v-for="header in props.headers"
            v-show="header.filterable === 'true'"
            :key="header.text"
        >
            <VTextField
                :label="header.text"
                box
            />
        </th>
    </tr>
</template>

【讨论】：