На vue написал компонент таблицы, который умеет работать с пагинацией, поиском и сортировкой на стороне сервера. По сути таблица только рендерит готовые данные и эмитит наружу события с нужными данными, на основе которых снаружи таблицы, уже отрабатывают методы с запросами на сервер. Вот как выглядит компонент на странице:
<server-table
:items="table.data"
:fields="table.fields"
:meta="table.meta"
@on-page-change="onPageChange"
@on-sort="onSort"
@on-search="onSearch"
/>
Трудность в том, что на каждой странице, есть какие-либо экшены в таблице и везде они уникальные, то есть каким-то образом меняют данные в таблице, добавляют или удаляют. Здесь не получится сделать так, что вся логика закрыта внутри таблицы и мы прокидываем туда только основной урл апи.
Данная реализация полностью справляется с задачами, но смущает то, что на каждой странице приходится писать одни и те же методы на разных всех страницах. К тому же, есть страницы где есть две и более таблицы. Есть ли какие-то способы улучшить данный код?
Вот минимальный пример того, как работает таблица.
https://codesandbox.io/s/friendly-pasteur-c1n2j