Введение
В этом уроке мы доработаем frontend личного кабинета контрагента, чтобы выводить прайс‑лист с возможностью пагинации, отображения 10 товаров на странице и поиска по частям строки. Для реализации таблицы используется компонент v-data-table из библиотеки Vuetify.
Пагинация и отображение 10 товаров на странице
Компонент v-data-table поддерживает встроенную пагинацию. При настройке параметра items-per-page можно задать, сколько строк будет выводиться на одной странице. В нашем случае это 10 товаров.
Поиск товаров по части строки
Vuetify предоставляет свойство search, которое позволяет фильтровать строки таблицы по введённой пользователем строке. В сочетании с v-data-table это реализует быстрый поиск по названию, артикулу и другим полям товара.
Пример конфигурации компонента
Ниже приведён минимальный пример настройки v-data-table для работы с прайс‑листом. (Код не является полным, а лишь иллюстрацией ключевых параметров.)
<v-data-table
:headers="headers"
:items="products"
:search="search"
:items-per-page="10"
class="elevation-1"
>
<template v-slot:top>
<v-text-field
v-model="search"
label="Поиск"
single-line
hide-details
/>
</template>
</v-data-table>
Где посмотреть полный курс
Если хотите разобраться во всех деталях интеграции 1С с Django, включая настройку API, аутентификацию и работу с базой данных, рекомендуем пройти полный курс: https://nizamov.school/courses/integration1s/django-1c?utm_source=telegram
Вывод
Добавив пагинацию и поиск в v-data-table, вы сделаете работу с прайс‑листом более удобной и интуитивно понятной для контрагентов. Следующие части урока будут посвящены дальнейшей доработке функционала и улучшению UX.