Reusable data view component with table and card modes.
npm install vue-efko-data-viewКомпонент представления данных
=============================
Индекс пакета: VUEADV
Библиотека компонентов Vue для отображения данных в таблице и виде карточек с поддержкой фильтрации, управления колонками и ленивой подгрузки — подходит для проектов, где требуется единый интерфейс просмотра и администрирования сущностей.
- Docker >= 26.0.0
- Docker Compose >= 1.29.2
``bashИндекс проекта
PROJECT_INDEX=VUEADV
Установка в проект
1. Установить пакет компонентов:
`bash
npm install @efko/data-view
`
2. Зарегистрировать компоненты и стиль в точке входа приложения:
`ts
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import { DataView } from '@efko/data-view'; const app = createApp(App);
app.use(Antd);
app.component('DataView', DataView);
app.mount('#app');
`Запуск для локальной разработки
1. Установить зависимости проекта внутри контейнера билдера:
`bash
make docker-build
`
2. Запустить контейнер data-view-app в режиме разработки:
`bash
make up
`
3. Просмотреть собранные артефакты и их состояние:
`bash
make logs
`
4. Для пересборки библиотеки и генерации типов выполнить:
`bash
make restart
`
5. Для интерактивной работы:
`bash
make shell
`Пример использования
`vue
:loading="loading"
:columns="columns"
:data-source="rows"
:pagination="true"
:meta="meta"
:can-edit="true"
:edit-action="true"
:filter-values="filters"
@page-change="handlePage"
@size-change="handleSize"
@filter-apply="handleFilter"
@edit="handleEdit"
>
Список заявок
{{ new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'RUB' }).format(record.amount) }}
{{ record[column.dataIndex] }}
Изменить
Удалить
``