Question

我想为表格的每一列添加单个列搜索（文本输入）。我在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>

Answer 1

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

{{1}}

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

1 个答案: