Документация по компоненту Table

Этот документ описывает, как использовать Vue-компонент Table для создания мощных и настраиваемых таблиц с поддержкой REST API на базе библиотеки flamerest.

Содержание

Установка и настройка

Для использования компонента, сперва установите его и peer-зависимости из npm:

npm install flameresttable flamerest

Затем импортируйте компонент и его утилиты в вашем Vue-файле.

<template>
  <Table
    :model="Model"
    :opts="opts"
    ref="postsTable"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Model from '@/models/Houses'; // тут указание на модель конкретной REST-таблицы, а имя всегда Model
import Table from 'flameresttable/src/Table/Table.vue';
import TableOpts from 'flameresttable/src/Table/TableOpts';

const postsTable = ref<InstanceType<typeof Table>>();

const opts = new TableOpts();
// ... дальнейшая настройка объекта opts
</script>

Props компонента

model *
Class
Класс модели данных, унаследованный от REST.Model из пакета flamerest.
opts
TableOpts
new TableOpts()
Объект с настройками таблицы.

Конфигурация (TableOpts)

Ключевые опции, которые задаются в экземпляре TableOpts.

Методы конфигурации (TableOpts)

Для динамического управления колонками в объекте opts есть несколько удобных методов.

set(columnName, options)
(string | string[], IColumn) => void
Устанавливает или изменяет конфигурацию для одной или нескольких колонок. Новые опции сливаются с существующими.
// Установить ширину для колонки 'id'
opts.set('id', { Table: { width: 100 } });

// Установить один и тот же заголовок для нескольких колонок
opts.set(['created_at', 'updated_at'], { Table: { title: 'Дата' } });
delete(columnName)
(string | string[]) => void
"Мягко удаляет" колонку — скрывает ее из таблицы, фильтров и всплывающего окна, устанавливая соответствующие флаги isShow: false.
// Скрыть системную колонку
opts.delete('internal_id');
addVirtual(columnName, options)
(string, IColumn) => void
Добавляет "виртуальную" колонку. Эта колонка не запрашивается с сервера в основном запросе, но для нее можно настроить фильтры. Это полезно для создания сложных фильтров (например, по диапазону дат), которые на бэкенде обрабатываются как несколько разных полей.
// Добавить виртуальный фильтр по диапазону дат
opts.addVirtual('date_range', {
  Filter: { isShow: true, type: 'daterange', title: 'Период создания' },
  Table: { isShow: false }, // саму колонку в таблице не показываем
  Popup: { isShow: false }
});

Подробная конфигурация колонок (IColumn)

Опции для каждой колонки задаются через метод opts.set('columnName', { ... }). Ниже представлено детальное описание всех доступных свойств.

Методы компонента (через ref)

Доступ к методам и состоянию таблицы осуществляется через ref. Например: postsTable.value.Table.update().

Основные методы

Свойства состояния

Слоты (с примерами)

Компонент предоставляет несколько слотов для глубокой кастомизации.

#defaultButtons и #otherButtons

Для добавления кастомных кнопок на панель управления.

<Table :opts="opts" ref="table">
    <template #otherButtons>
        <button @click="showSelected">Показать выбранных</button>
    </template>
</Table>

#CustomRow

Полностью заменяет рендеринг строки. Используется, когда opts.displayMode = 'custom'.

Параметры: row, edit, remove, table.

<!-- opts.displayMode = 'custom'; -->
<Table :opts="opts">
    <template #CustomRow="{ row, edit, remove }">
        <div class="my-card">
            <h5>{{ row.username }}</h5>
            <button @click="edit()">Edit</button>
        </div>
    </template>
</Table>

#RowSubSlot

Отображает контент в раскрывающемся под-пространстве под строкой (когда opts.onRowClickOpenSlot = 'rowspace').

Параметры: row.

<!-- opts.onRowClickOpenSlot = 'rowspace'; -->
<Table :opts="opts">
    <template #RowSubSlot="{ row }">
        <div>Детали заказа №{{ row.id }}</div>
    </template>
</Table>

Слоты для глубокой кастомизации

Существуют также слоты, позволяющие заменить основные части стандартной таблицы:

Реальный пример использования

Ниже приведен пример из реального проекта для настройки таблицы постов.

// В <script setup>
import { ref } from 'vue';
import Model from '@/models/Userprojectsposts'; // импортируем модель как Model
import Table from 'flameresttable/src/Table/Table.vue';
import TableOpts from 'flameresttable/src/Table/TableOpts';

// 1. Инициализация
const postsTable = ref<InstanceType<typeof Table>>();
const opts = new TableOpts();

// 2. Настройка глобального поведения
opts.Add.can = false;
opts.Edit.can = false;
opts.Remove.can = true;
opts.lang = "ru";
opts.Pagination.type = 'scrollable';
opts.Export.isShow = false;
opts.rowSelectors = false; // Отключаем чекбоксы выбора

// 3. Пакетная настройка колонок
// Скрываем все фильтры по умолчанию, чтобы потом включить только нужные
Object.keys(new Model()).forEach(key => {
  opts.set(key, { Filter: { isShow: false } });
});

// 4. Точечная настройка нужных колонок и фильтров
opts.set("id", { 
  title: 'ID',
  Filter: { isShow: true, type: 'number' },
  Table: { width: 80 }
});

opts.set("status", { 
  title: 'Статус',
  Filter: { 
    isShow: true, 
    type: 'selector', 
    selector: { multiselect: true } 
  }, 
  Selector: {
    values: [ // Задаем статические значения для селектора
      { id: '0', title: 'Придуман' },
      { id: '1', title: 'Запощен' },
      { id: '2', title: 'Отменён' },
    ]
  }
});

<!-- В <template> -->
<Table 
    :model="Model" 
    :opts="opts" 
    ref="postsTable" 
/>