Время прочтения: 3 мин.

Все мы пользуемся Excel таблицами, умеем их форматировать, устанавливать фильтр и т.д. Но что, если вам нужно вывести этот функционал на веб-страницу, чтобы пользователю было удобно искать нужные объекты. Для упрощения этой разработки можно использовать различные плагины.

Например, нашей команде, состоящей из frontend-разработчика, backend-разработчика и аналитика поступила задача в короткие сроки сделать поиск и стилизовать таблицу.  Frontend проекта реализовывался на Vue.JS.  Поэтому было решено использовать какой-нибудь плагин для этого фрейморка. Поисковая система выдала самым первым результатом  vue-good-table (работает только на Vue 2). Посмотрев документацию этого плагина, наша команда решила взять его для работы.

Первым делом frontend-разработчик установил плагин vue good table в проект.

npm install --save vue-good-table

После этого импортировал стили в приложение

import 'vue-good-table/dist/vue-good-table.css'
import { VueGoodTable } from 'vue-good-table';

и создал компонент

components: {
  VueGoodTable,
}

У нас имеются данные участников шахматного турнира (все персональные данные изменены). Rows-ряды, Column-колонки таблицы, где label-метка, а field-поле.

Экспорт для колонки выглядит так:

        {
          label: 'Id',
          field: 'id',
        },

На проекте данные хранятся в базе данных MySQL. Сейчас же для удобства мы рассмотрим их в виде обычного словаря:

      { id:1, surname:"Иванов",name:"Иван",patronymic:"Иванович", age: 58,birthday:'02.10.1964',city:"Красноярск",registration:true,category:"1", participation_earlier:true}

Id-id участника, surname-Фамилия, name-Имя, patronymic-Отчество, age-возраст, birthday-дата рождения, city-Город, registration-Зарегистрировался ли участник, category-разряд, participation_earlier-Участвовал ли участник ранее.

Когда мы определились с колонками, то перешли к созданию самой таблицы. Было необходимо, чтобы Поле «Регистрация в турнире», как и «Участвовал ранее», можно было выбирать и при значении true отображалось «Да», а при false «Нет»

<vue-good-table :columns="columns" :rows="rows">
                <template slot="table-row" scope="props">
    <template slot="table-row" scope="props">
<span v-if="props.column.field == 'registration'">
                        <span>
                            <select v-model="props.row.registration" name="" id="">
                                <option value="true">Да</option>
                                <option value="false">Нет</option>
                            </select> </span>
                    </span>
                    <span v-else-if="props.column.field == 'participation_earlier'">
                        <span>
                            <select v-model="props.row.participation_earlier" name="" id="">
                                <option value="true">Да</option>
                                <option value="false">Нет</option>
                            </select> </span>
                    </span>
                    <span v-else>
      {{props.formattedRow[props.column.field]}}
    </span>
                </template>                </template>
            </vue-good-table>

Т.к. наша цель просто узнать и понять возможности плагина, изменения combobox не будут сохраняться.

Как видно, таблица сразу отображается с возможностью сортировки по столбцам

Каркас таблицы готов, теперь можно сортировать значения столбцов, а что насчет поиска?

Все куда проще, чем казалось. Чтобы добавить поиск (фильтр) именно по столбцу, достаточно прописать нужное свойство:

filterOptions: {
                            enabled: true, placeholder: 'Разряд'
                    }

, где placeholder-текст подсказки в поле ввода

Требовалось также сделать поиск по всей таблицы, поэтому мы добавили свойство

  :search-options="{ enabled: true }

Также нужно было сделать пагинацию. Для этого тоже было достаточно указать в теге vue-good-table свойство

 :pagination-options="{
    enabled: true,
    perPageDropdown: [3, 7, 9],
    nextLabel: 'Вперед',
    prevLabel: 'Назад',
    rowsPerPageLabel: 'Показывать по',
    ofLabel: 'из',
  }"

perPageDropdown — по сколько строчек должно показываться на странице.

Если таблица большая, то можно закрепить ее шапку, которая при прокрутке будет оставаться на месте:

:fixed-header="true"

Главное не забыть еще указать максимальную высоту таблицы.

Стилизовать же строчки и столбцы можно с помощью обычных свойств CSS, просто обращаясь к элементам таблицы th, td и пр.

 Таким образом, плагин good vue table помогает упростить работу с таблицами во Vue.JS. Мы рассмотрели лишь самые простые возможности этого плагина.

Полный код: https://github.com/SVErmol/table-vue.