Как добавить поиск отдельных столбцов (ввод текста) в таблицу данных vuetify? - PullRequest
Новая
       10

Как добавить поиск отдельных столбцов (ввод текста) в таблицу данных vuetify?

0 голосов
/ 29 ноября 2018

Я хочу добавить поиск по отдельному столбцу (текстовые входы) для каждого столбца таблицы. Я нашел его в vuetify, но нет примера, связанного с этим.Я использую этот код ниже.

Мне нужна таблица, которая выглядит следующим образом: эта таблица данных

Я передаю эти параметры в основной компонент

компонент

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

1 Ответ

0 голосов
/ 21 декабря 2018

Использовать слот заголовка таблицы.Вот пример того, как вы можете реализовать поля ввода текста под заголовками таблицы.Это создает две строки в заголовке таблицы - первая будет содержать заголовки, вторая будет содержать поля ввода, в которых столбец заголовка таблицы имеет фильтруемый набор 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>
...