flameresttable 1.0.115 → 1.0.116
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/docs.html +342 -0
- package/package.json +1 -1
- package/src/Table/Table.vue +10 -2
- package/src/Table/TableOpts.ts +7 -0
- package/vite.config.js +2 -1
package/docs/docs.html
ADDED
|
@@ -0,0 +1,342 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="ru">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Документация по компоненту Table</title>
|
|
7
|
+
<style>
|
|
8
|
+
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: 0 auto; padding: 20px; background-color: #f9f9f9; }
|
|
9
|
+
h1, h2, h3, h4 { color: #2c3e50; }
|
|
10
|
+
h1, h2, h3 { border-bottom: 2px solid #eaecef; padding-bottom: 0.3em; }
|
|
11
|
+
h1 { font-size: 2.5em; }
|
|
12
|
+
h2 { font-size: 2em; }
|
|
13
|
+
h3 { font-size: 1.5em; }
|
|
14
|
+
h4 { font-size: 1.2em; border-bottom: 1px solid #e1e4e8; padding-bottom: 0.2em;}
|
|
15
|
+
/* Стили для инлайнового кода */
|
|
16
|
+
code {
|
|
17
|
+
background-color: #e8e8e8;
|
|
18
|
+
padding: 0.2em 0.4em;
|
|
19
|
+
margin: 0;
|
|
20
|
+
font-size: 85%;
|
|
21
|
+
border-radius: 3px;
|
|
22
|
+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
23
|
+
}
|
|
24
|
+
/* Сброс стилей для блоков кода, чтобы работала подсветка синтаксиса */
|
|
25
|
+
pre > code {
|
|
26
|
+
background-color: transparent;
|
|
27
|
+
padding: 0;
|
|
28
|
+
margin: 0;
|
|
29
|
+
font-size: inherit;
|
|
30
|
+
border: none;
|
|
31
|
+
}
|
|
32
|
+
pre { background-color: #f6f8fa; border: 1px solid #ddd; border-radius: 3px; padding: 16px; overflow: auto; margin-top: 0; }
|
|
33
|
+
.prop-name { font-weight: bold; font-family: monospace; }
|
|
34
|
+
.prop-type { font-style: italic; color: #e96900; }
|
|
35
|
+
.prop-default { color: #999; }
|
|
36
|
+
.prop-desc { margin-top: 5px; margin-left: 20px;}
|
|
37
|
+
.prop-block { margin-bottom: 20px; border-left: 3px solid #ccc; padding-left: 15px; }
|
|
38
|
+
.details-list ul { padding-left: 20px; }
|
|
39
|
+
.details-list li { margin-bottom: 10px; }
|
|
40
|
+
table { border-collapse: collapse; width: 100%; margin-bottom: 1em;}
|
|
41
|
+
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
|
42
|
+
th { background-color: #f2f2f2; }
|
|
43
|
+
.required { color: #d04437; font-weight: bold; }
|
|
44
|
+
.note { background-color: #fff9e6; border-left: 4px solid #ffc107; padding: 10px 15px; margin: 1em 0; }
|
|
45
|
+
.slot-example { border: 1px solid #ddd; border-radius: 5px; padding: 15px; margin-top: 10px; background-color: #fff; }
|
|
46
|
+
</style>
|
|
47
|
+
</head>
|
|
48
|
+
<body>
|
|
49
|
+
|
|
50
|
+
<h1>Документация по компоненту Table</h1>
|
|
51
|
+
|
|
52
|
+
<p>Этот документ описывает, как использовать Vue-компонент <code>Table</code> для создания мощных и настраиваемых таблиц с поддержкой REST API на базе библиотеки <code>flamerest</code>.</p>
|
|
53
|
+
|
|
54
|
+
<h2>Содержание</h2>
|
|
55
|
+
<ul>
|
|
56
|
+
<li><a href="#setup">Установка и настройка</a></li>
|
|
57
|
+
<li><a href="#props">Props компонента</a></li>
|
|
58
|
+
<li><a href="#table-opts">Конфигурация (TableOpts)</a></li>
|
|
59
|
+
<li><a href="#table-opts-methods">Методы конфигурации (TableOpts)</a></li>
|
|
60
|
+
<li><a href="#column-opts-detailed">Подробная конфигурация колонок (IColumn)</a></li>
|
|
61
|
+
<li><a href="#methods">Методы компонента (через ref)</a></li>
|
|
62
|
+
<li><a href="#slots">Слоты (с примерами)</a></li>
|
|
63
|
+
<li><a href="#example">Реальный пример использования</a></li>
|
|
64
|
+
</ul>
|
|
65
|
+
|
|
66
|
+
<h2 id="setup">Установка и настройка</h2>
|
|
67
|
+
<p>Для использования компонента, сперва установите его и peer-зависимости из npm:</p>
|
|
68
|
+
<pre><code>npm install flameresttable flamerest</code></pre>
|
|
69
|
+
<p>Затем импортируйте компонент и его утилиты в вашем Vue-файле.</p>
|
|
70
|
+
<pre><code class="language-vue"><template>
|
|
71
|
+
<Table
|
|
72
|
+
:model="Model"
|
|
73
|
+
:opts="opts"
|
|
74
|
+
ref="postsTable"
|
|
75
|
+
/>
|
|
76
|
+
</template>
|
|
77
|
+
|
|
78
|
+
<script setup lang="ts">
|
|
79
|
+
import { ref } from 'vue';
|
|
80
|
+
import Model from '@/models/Houses'; // тут указание на модель конкретной REST-таблицы, а имя всегда Model
|
|
81
|
+
import Table from 'flameresttable/src/Table/Table.vue';
|
|
82
|
+
import TableOpts from 'flameresttable/src/Table/TableOpts';
|
|
83
|
+
|
|
84
|
+
const postsTable = ref<InstanceType<typeof Table>>();
|
|
85
|
+
|
|
86
|
+
const opts = new TableOpts();
|
|
87
|
+
// ... дальнейшая настройка объекта opts
|
|
88
|
+
</script></code></pre>
|
|
89
|
+
|
|
90
|
+
<h2 id="props">Props компонента</h2>
|
|
91
|
+
<div class="prop-block">
|
|
92
|
+
<div class="prop-name">model <span class="required">*</span></div>
|
|
93
|
+
<div class="prop-type">Class</div>
|
|
94
|
+
<div class="prop-desc">Класс модели данных, унаследованный от <code>REST.Model</code> из пакета <code>flamerest</code>.</div>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="prop-block">
|
|
97
|
+
<div class="prop-name">opts</div>
|
|
98
|
+
<div class="prop-type">TableOpts</div>
|
|
99
|
+
<div class="prop-default">new TableOpts()</div>
|
|
100
|
+
<div class="prop-desc">Объект с настройками таблицы.</div>
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
<h2 id="table-opts">Конфигурация (TableOpts)</h2>
|
|
104
|
+
<p>Ключевые опции, которые задаются в экземпляре <code>TableOpts</code>.</p>
|
|
105
|
+
<ul>
|
|
106
|
+
<li><span class="prop-name">displayMode</span>: <span class="prop-type">'table' | 'custom'</span> - Режим отображения. 'table' - стандартный, 'custom' - для полного контроля через слот #CustomRow.</li>
|
|
107
|
+
<li><span class="prop-name">rowSelectors</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Показывать ли колонку с чекбоксами для выбора строк.</li>
|
|
108
|
+
<li><span class="prop-name">Add.can</span>, <span class="prop-name">Edit.can</span>, <span class="prop-name">Remove.can</span>: <span class="prop-type">boolean</span> - Включение/отключение кнопок управления.</li>
|
|
109
|
+
<li><span class="prop-name">Pagination.type</span>: <span class="prop-type">'scrollable' | 'pages'</span> - Тип пагинации: 'pages' - классическая, 'scrollable' - бесконечная прокрутка.</li>
|
|
110
|
+
<li><span class="prop-name">onRowClickOpenSlot</span>: <span class="prop-type">'popup' | 'rowspace' | 'none'</span> <span class="prop-default">('rowspace')</span> - Что происходит при клике на строку. 'rowspace' открывает под-слот, 'popup' открывает модальное окно редактирования, 'none' отключает стандартное поведение.</li>
|
|
111
|
+
<li><span class="prop-name">customDownloadHandler</span>: <span class="prop-type">Function</span> - Пользовательский обработчик для скачивания файлов экспорта.</li>
|
|
112
|
+
<li><span class="prop-name">onBeforeUpdate</span>: <span class="prop-type">Function</span> - Функция, выполняемая перед каждым запросом данных. Если вернет `false`, запрос не будет выполнен.</li>
|
|
113
|
+
</ul>
|
|
114
|
+
|
|
115
|
+
<h2 id="table-opts-methods">Методы конфигурации (TableOpts)</h2>
|
|
116
|
+
<p>Для динамического управления колонками в объекте <code>opts</code> есть несколько удобных методов.</p>
|
|
117
|
+
<div class="prop-block">
|
|
118
|
+
<div class="prop-name">set(columnName, options)</div>
|
|
119
|
+
<div class="prop-type">(string | string[], IColumn) => void</div>
|
|
120
|
+
<div class="prop-desc">Устанавливает или изменяет конфигурацию для одной или нескольких колонок. Новые опции сливаются с существующими.</div>
|
|
121
|
+
<pre><code>// Установить ширину для колонки 'id'
|
|
122
|
+
opts.set('id', { Table: { width: 100 } });
|
|
123
|
+
|
|
124
|
+
// Установить один и тот же заголовок для нескольких колонок
|
|
125
|
+
opts.set(['created_at', 'updated_at'], { Table: { title: 'Дата' } });</code></pre>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="prop-block">
|
|
128
|
+
<div class="prop-name">delete(columnName)</div>
|
|
129
|
+
<div class="prop-type">(string | string[]) => void</div>
|
|
130
|
+
<div class="prop-desc">"Мягко удаляет" колонку — скрывает ее из таблицы, фильтров и всплывающего окна, устанавливая соответствующие флаги <code>isShow: false</code>.</div>
|
|
131
|
+
<pre><code>// Скрыть системную колонку
|
|
132
|
+
opts.delete('internal_id');</code></pre>
|
|
133
|
+
</div>
|
|
134
|
+
<div class="prop-block">
|
|
135
|
+
<div class="prop-name">addVirtual(columnName, options)</div>
|
|
136
|
+
<div class="prop-type">(string, IColumn) => void</div>
|
|
137
|
+
<div class="prop-desc">Добавляет "виртуальную" колонку. Эта колонка не запрашивается с сервера в основном запросе, но для нее можно настроить фильтры. Это полезно для создания сложных фильтров (например, по диапазону дат), которые на бэкенде обрабатываются как несколько разных полей.</div>
|
|
138
|
+
<pre><code>// Добавить виртуальный фильтр по диапазону дат
|
|
139
|
+
opts.addVirtual('date_range', {
|
|
140
|
+
Filter: { isShow: true, type: 'daterange', title: 'Период создания' },
|
|
141
|
+
Table: { isShow: false }, // саму колонку в таблице не показываем
|
|
142
|
+
Popup: { isShow: false }
|
|
143
|
+
});</code></pre>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<h2 id="column-opts-detailed">Подробная конфигурация колонок (IColumn)</h2>
|
|
147
|
+
<p>Опции для каждой колонки задаются через метод <code>opts.set('columnName', { ... })</code>. Ниже представлено детальное описание всех доступных свойств.</p>
|
|
148
|
+
<div class="details-list">
|
|
149
|
+
<ul>
|
|
150
|
+
<li><span class="prop-name">title</span>: <span class="prop-type">string</span> - Глобальный заголовок для колонки, используется если не задан более специфичный.</li>
|
|
151
|
+
<li><span class="prop-name">isVirtual</span>: <span class="prop-type">boolean</span> <span class="prop-default">(false)</span> - Если <code>true</code>, колонка не будет запрашиваться с бэкенда в основном запросе. Полезно для кастомных фильтров (например, диапазон дат, который на бэкенде разбирается в два отдельных поля).</li>
|
|
152
|
+
<li><span class="prop-name">isLoadToTable</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Загружать ли это поле в основном запросе для отображения в таблице. Установка в `false` экономит трафик.</li>
|
|
153
|
+
<li><span class="prop-name">isLoadToPopup</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Загружать ли это поле при открытии окна редактирования.</li>
|
|
154
|
+
|
|
155
|
+
<li>
|
|
156
|
+
<h4><code>Table</code>: <span class="prop-type">object</span> - Настройки отображения в таблице</h4>
|
|
157
|
+
<ul>
|
|
158
|
+
<li><span class="prop-name">isShow</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Показывать ли колонку.</li>
|
|
159
|
+
<li><span class="prop-name">title</span>: <span class="prop-type">string</span> - Заголовок столбца (переопределяет глобальный `title`).</li>
|
|
160
|
+
<li><span class="prop-name">value</span>: <span class="prop-type">(row, column) => string</span> - Функция для форматирования значения в ячейке.</li>
|
|
161
|
+
<li><span class="prop-name">isRawValue</span>: <span class="prop-type">boolean</span> <span class="prop-default">(false)</span> - Если `true`, результат `value` будет вставлен как HTML (<b>Осторожно, XSS!</b>).</li>
|
|
162
|
+
<li><span class="prop-name">click</span>: <span class="prop-type">(row, column) => void</span> - Обработчик клика по ячейке.</li>
|
|
163
|
+
<li><span class="prop-name">classes</span> / <span class="prop-name">classesHeader</span>: <span class="prop-type">string</span> - Дополнительные CSS классы для ячеек (`<td>`) и заголовка (`<th>`).</li>
|
|
164
|
+
<li><span class="prop-name">width</span>: <span class="prop-type">number</span> - Ширина колонки в пикселях.</li>
|
|
165
|
+
</ul>
|
|
166
|
+
</li>
|
|
167
|
+
|
|
168
|
+
<li>
|
|
169
|
+
<h4><code>Filter</code>: <span class="prop-type">object</span> - Настройки фильтра</h4>
|
|
170
|
+
<ul>
|
|
171
|
+
<li><span class="prop-name">isShow</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Показывать ли фильтр.</li>
|
|
172
|
+
<li><span class="prop-name">type</span>: <span class="prop-type">"text" | "fixed" | "fulltext" | "number" | "date" | "daterange" | "selector"</span> <span class="prop-default">('text')</span> - Тип поля фильтра.</li>
|
|
173
|
+
<li><span class="prop-name">title</span>: <span class="prop-type">string</span> - Заголовок над полем фильтра.</li>
|
|
174
|
+
<li><span class="prop-name">selector</span>: <span class="prop-type">object</span> - Настройки для фильтра типа `selector`.
|
|
175
|
+
<ul>
|
|
176
|
+
<li><span class="prop-name">multiselect</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Разрешить множественный выбор.</li>
|
|
177
|
+
<li><span class="prop-name">mode</span>: <span class="prop-type">'vertical' | 'horizontal'</span> <span class="prop-default">('vertical')</span> - Режим отображения (вертикальный выпадающий список или горизонтальные кнопки).</li>
|
|
178
|
+
</ul>
|
|
179
|
+
</li>
|
|
180
|
+
</ul>
|
|
181
|
+
</li>
|
|
182
|
+
|
|
183
|
+
<li>
|
|
184
|
+
<h4><code>Popup</code>: <span class="prop-type">object</span> - Настройки поля в форме добавления/редактирования</h4>
|
|
185
|
+
<ul>
|
|
186
|
+
<li><span class="prop-name">isShow</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Показывать ли поле.</li>
|
|
187
|
+
<li><span class="prop-name">isEnabled</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Доступно ли поле для редактирования.</li>
|
|
188
|
+
<li><span class="prop-name">title</span> / <span class="prop-name">desc</span> / <span class="prop-name">placeholder</span>: <span class="prop-type">string</span> - Заголовок, описание и плейсхолдер для поля.</li>
|
|
189
|
+
<li><span class="prop-name">popupType</span>: <span class="prop-type">"string" | "text" | "button" | "date" | "selector" | "image" | "file"</span> <span class="prop-default">('string')</span> - Тип поля в форме.</li>
|
|
190
|
+
<li><span class="prop-name">isSendFromAdd</span> / <span class="prop-name">isSendFromEdit</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Отправлять ли значение поля на бэкенд при создании/редактировании.</li>
|
|
191
|
+
</ul>
|
|
192
|
+
</li>
|
|
193
|
+
|
|
194
|
+
<li>
|
|
195
|
+
<h4><code>Selector</code>: <span class="prop-type">object</span> - Настройки для связанных данных (для фильтров и полей `selector`)</h4>
|
|
196
|
+
<ul>
|
|
197
|
+
<li><span class="prop-name">model</span>: <span class="prop-type">Class</span> - Модель, из которой будут автоматически загружены значения (например, `model: RolesModel`).</li>
|
|
198
|
+
<li><span class="prop-name">values</span>: <span class="prop-type">ITableSelectorItem[]</span> - Массив статичных значений для селектора. Формат: <code>[{ id: 'val', title: 'Label' }]</code>.</li>
|
|
199
|
+
<li><span class="prop-name">loader</span>: <span class="prop-type">Function</span> - Функция для ручной загрузки значений, если логика сложнее, чем просто `model.all()`.</li>
|
|
200
|
+
<li><span class="prop-name">preload</span>: <span class="prop-type">boolean</span> <span class="prop-default">(true)</span> - Предзагружать ли значения селектора при инициализации таблицы.</li>
|
|
201
|
+
</ul>
|
|
202
|
+
</li>
|
|
203
|
+
</ul>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<h2 id="methods">Методы компонента (через ref)</h2>
|
|
207
|
+
<p>Доступ к методам и состоянию таблицы осуществляется через <code>ref</code>. Например: <code>postsTable.value.Table.update()</code>.</p>
|
|
208
|
+
<h4>Основные методы</h4>
|
|
209
|
+
<div class="details-list">
|
|
210
|
+
<ul>
|
|
211
|
+
<li><span class="prop-name">update(loadParams, exportFilename)</span>: Загружает или обновляет данные таблицы. Можно передать дополнительные параметры загрузки.</li>
|
|
212
|
+
<li><span class="prop-name">add()</span>: Открывает модальное окно для создания новой записи.</li>
|
|
213
|
+
<li><span class="prop-name">save()</span>: Сохраняет изменения в редактируемой записи.</li>
|
|
214
|
+
<li><span class="prop-name">remove(row)</span>: Удаляет указанную строку.</li>
|
|
215
|
+
<li><span class="prop-name">getSelectedRows()</span>: Возвращает массив выделенных (чекбоксом) строк.</li>
|
|
216
|
+
<li><span class="prop-name">exportToCSV(filename, rows)</span>: Экспортирует данные в CSV на стороне клиента.</li>
|
|
217
|
+
<li><span class="prop-name">exportToXLS(onlySelected, filename, rows)</span>: Инициирует экспорт в XLSX на стороне сервера.</li>
|
|
218
|
+
</ul>
|
|
219
|
+
</div>
|
|
220
|
+
<h4>Свойства состояния</h4>
|
|
221
|
+
<div class="details-list">
|
|
222
|
+
<ul>
|
|
223
|
+
<li><span class="prop-name">Rows</span>: <span class="prop-type">{ rows: Array<T> }</span> - Реактивный объект с загруженными строками.</li>
|
|
224
|
+
<li><span class="prop-name">Pager</span>: <span class="prop-type">object</span> - Реактивный объект с состоянием пагинации (`page`, `perPage`, `total`).</li>
|
|
225
|
+
<li><span class="prop-name">loadingStatus</span>: <span class="prop-type">'process' | 'completed'</span> - Статус загрузки данных.</li>
|
|
226
|
+
<li><span class="prop-name">exportStatus</span>: <span class="prop-type">'exportprocess' | 'completed'</span> - Статус экспорта данных.</li>
|
|
227
|
+
</ul>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
<h2 id="slots">Слоты (с примерами)</h2>
|
|
231
|
+
<p>Компонент предоставляет несколько слотов для глубокой кастомизации.</p>
|
|
232
|
+
<div class="slot-example">
|
|
233
|
+
<h4><code>#defaultButtons</code> и <code>#otherButtons</code></h4>
|
|
234
|
+
<p>Для добавления кастомных кнопок на панель управления.</p>
|
|
235
|
+
<pre><code class="language-vue"><Table :opts="opts" ref="table">
|
|
236
|
+
<template #otherButtons>
|
|
237
|
+
<button @click="showSelected">Показать выбранных</button>
|
|
238
|
+
</template>
|
|
239
|
+
</Table>
|
|
240
|
+
</code></pre>
|
|
241
|
+
</div>
|
|
242
|
+
|
|
243
|
+
<div class="slot-example">
|
|
244
|
+
<h4><code>#CustomRow</code></h4>
|
|
245
|
+
<p>Полностью заменяет рендеринг строки. Используется, когда <code>opts.displayMode = 'custom'</code>.</p>
|
|
246
|
+
<p><b>Параметры:</b> <code>row</code>, <code>edit</code>, <code>remove</code>, <code>table</code>.</p>
|
|
247
|
+
<pre><code class="language-vue"><!-- opts.displayMode = 'custom'; -->
|
|
248
|
+
<Table :opts="opts">
|
|
249
|
+
<template #CustomRow="{ row, edit, remove }">
|
|
250
|
+
<div class="my-card">
|
|
251
|
+
<h5>{{ row.username }}</h5>
|
|
252
|
+
<button @click="edit()">Edit</button>
|
|
253
|
+
</div>
|
|
254
|
+
</template>
|
|
255
|
+
</Table>
|
|
256
|
+
</code></pre>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div class="slot-example">
|
|
260
|
+
<h4><code>#RowSubSlot</code></h4>
|
|
261
|
+
<p>Отображает контент в раскрывающемся под-пространстве под строкой (когда <code>opts.onRowClickOpenSlot = 'rowspace'</code>).</p>
|
|
262
|
+
<p><b>Параметры:</b> <code>row</code>.</p>
|
|
263
|
+
<pre><code class="language-vue"><!-- opts.onRowClickOpenSlot = 'rowspace'; -->
|
|
264
|
+
<Table :opts="opts">
|
|
265
|
+
<template #RowSubSlot="{ row }">
|
|
266
|
+
<div>Детали заказа №{{ row.id }}</div>
|
|
267
|
+
</template>
|
|
268
|
+
</Table>
|
|
269
|
+
</code></pre>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<div class="note">
|
|
273
|
+
<h4>Слоты для глубокой кастомизации</h4>
|
|
274
|
+
<p>Существуют также слоты, позволяющие заменить основные части стандартной таблицы:</p>
|
|
275
|
+
<ul>
|
|
276
|
+
<li><code>#TableHeaders</code>: для полной замены заголовка таблицы.</li>
|
|
277
|
+
<li><code>#Row</code>: для замены рендеринга одной строки в стандартном режиме 'table'.</li>
|
|
278
|
+
<li><code>#header</code>: для добавления контента в заголовок модального окна добавления/редактирования.</li>
|
|
279
|
+
</ul>
|
|
280
|
+
</div>
|
|
281
|
+
|
|
282
|
+
<h2 id="example">Реальный пример использования</h2>
|
|
283
|
+
<p>Ниже приведен пример из реального проекта для настройки таблицы постов.</p>
|
|
284
|
+
|
|
285
|
+
<pre><code class="language-javascript">// В <script setup>
|
|
286
|
+
import { ref } from 'vue';
|
|
287
|
+
import Model from '@/models/Userprojectsposts'; // импортируем модель как Model
|
|
288
|
+
import Table from 'flameresttable/src/Table/Table.vue';
|
|
289
|
+
import TableOpts from 'flameresttable/src/Table/TableOpts';
|
|
290
|
+
|
|
291
|
+
// 1. Инициализация
|
|
292
|
+
const postsTable = ref<InstanceType<typeof Table>>();
|
|
293
|
+
const opts = new TableOpts();
|
|
294
|
+
|
|
295
|
+
// 2. Настройка глобального поведения
|
|
296
|
+
opts.Add.can = false;
|
|
297
|
+
opts.Edit.can = false;
|
|
298
|
+
opts.Remove.can = true;
|
|
299
|
+
opts.lang = "ru";
|
|
300
|
+
opts.Pagination.type = 'scrollable';
|
|
301
|
+
opts.Export.isShow = false;
|
|
302
|
+
opts.rowSelectors = false; // Отключаем чекбоксы выбора
|
|
303
|
+
|
|
304
|
+
// 3. Пакетная настройка колонок
|
|
305
|
+
// Скрываем все фильтры по умолчанию, чтобы потом включить только нужные
|
|
306
|
+
Object.keys(new Model()).forEach(key => {
|
|
307
|
+
opts.set(key, { Filter: { isShow: false } });
|
|
308
|
+
});
|
|
309
|
+
|
|
310
|
+
// 4. Точечная настройка нужных колонок и фильтров
|
|
311
|
+
opts.set("id", {
|
|
312
|
+
title: 'ID',
|
|
313
|
+
Filter: { isShow: true, type: 'number' },
|
|
314
|
+
Table: { width: 80 }
|
|
315
|
+
});
|
|
316
|
+
|
|
317
|
+
opts.set("status", {
|
|
318
|
+
title: 'Статус',
|
|
319
|
+
Filter: {
|
|
320
|
+
isShow: true,
|
|
321
|
+
type: 'selector',
|
|
322
|
+
selector: { multiselect: true }
|
|
323
|
+
},
|
|
324
|
+
Selector: {
|
|
325
|
+
values: [ // Задаем статические значения для селектора
|
|
326
|
+
{ id: '0', title: 'Придуман' },
|
|
327
|
+
{ id: '1', title: 'Запощен' },
|
|
328
|
+
{ id: '2', title: 'Отменён' },
|
|
329
|
+
]
|
|
330
|
+
}
|
|
331
|
+
});
|
|
332
|
+
</code></pre>
|
|
333
|
+
<pre><code class="language-vue"><!-- В <template> -->
|
|
334
|
+
<Table
|
|
335
|
+
:model="Model"
|
|
336
|
+
:opts="opts"
|
|
337
|
+
ref="postsTable"
|
|
338
|
+
/>
|
|
339
|
+
</code></pre>
|
|
340
|
+
|
|
341
|
+
</body>
|
|
342
|
+
</html>
|
package/package.json
CHANGED
package/src/Table/Table.vue
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<TableFilters :columns="Table.columns" :table="Table"></TableFilters>
|
|
6
6
|
|
|
7
7
|
<!-- ПАНЕЛЬ ОПЕРАЦИЙ НАД ТАБЛИЦЕЙ -->
|
|
8
|
-
<TableTasksPanel :table="Table" @add="add">
|
|
8
|
+
<TableTasksPanel v-if="Table.opts.displayMode === 'table'" :table="Table" @add="add">
|
|
9
9
|
<template #defaultButtons>
|
|
10
10
|
<slot name="defaultButtons">
|
|
11
11
|
</slot>
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
</TableTasksPanel>
|
|
19
19
|
|
|
20
20
|
<!-- ТАБЛИЦА-->
|
|
21
|
-
<div ref="MainTableElement" class="mt-2 table table-fixed w-full ">
|
|
21
|
+
<div v-if="Table.opts.displayMode === 'table'" ref="MainTableElement" class="mt-2 table table-fixed w-full ">
|
|
22
22
|
|
|
23
23
|
<!-- ЗАГОЛОВКИ СТОЛБЦОВ-->
|
|
24
24
|
<slot name="TableHeaders" :columns="Table.columns">
|
|
@@ -105,6 +105,14 @@
|
|
|
105
105
|
</div>
|
|
106
106
|
|
|
107
107
|
</div>
|
|
108
|
+
|
|
109
|
+
<!-- CUSTOM ROWS -->
|
|
110
|
+
<div v-if="Table.opts.displayMode === 'custom'" ref="MainTableElement" class="mt-2 w-full">
|
|
111
|
+
<template v-for="(row, index) in (Table.Rows.rows)" :key="'custom_row_' + (row as any)[primaryKey] + '_' + index">
|
|
112
|
+
<slot name="CustomRow" :row="row" :edit="() => edit(row)" :remove="() => deleteRow(row)" :table="Table" />
|
|
113
|
+
</template>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
108
116
|
</div>
|
|
109
117
|
|
|
110
118
|
<!-- ПОСТРАНИЧНАЯ РАЗБИВКА -->
|
package/src/Table/TableOpts.ts
CHANGED
|
@@ -16,6 +16,13 @@ export default class TableOpts {
|
|
|
16
16
|
*/
|
|
17
17
|
public rowSelectors: boolean = true;
|
|
18
18
|
|
|
19
|
+
/**
|
|
20
|
+
* Режим отображения таблицы
|
|
21
|
+
* 'table' - стандартная таблица
|
|
22
|
+
* 'custom' - произвольный вид строк через слот
|
|
23
|
+
*/
|
|
24
|
+
public displayMode: 'table' | 'custom' = 'table';
|
|
25
|
+
|
|
19
26
|
/**
|
|
20
27
|
* Колонки
|
|
21
28
|
*/
|