L
L
lavezzi12020-10-05 11:04:31
Vue.js
lavezzi1, 2020-10-05 11:04:31

How to repeat less in the code implementing server side pagination, sort, search?

I wrote a table component on vue that can work with pagination, search and sorting on the server side. In fact, the table only renders ready-made data and emits events with the necessary data to the outside, on the basis of which outside the table, methods with requests to the server are already working out. Here's what the component looks like on the page:

<server-table
    :items="table.data"
    :fields="table.fields"
    :meta="table.meta"
    @on-page-change="onPageChange"
    @on-sort="onSort"
    @on-search="onSearch"
/>


The difficulty is that on each page there are some actions in the table and everywhere they are unique, that is, they somehow change the data in the table, add or delete it. Here it will not be possible to make it so that all the logic is closed inside the table and we pass only the main api url there.

This implementation completely copes with the tasks, but it is confusing that on each page you have to write the same methods on different pages. In addition, there are pages where there are two or more tables. Are there any ways to improve this code?

Here is a minimal example of how the table works.
https://codesandbox.io/s/friendly-pasteur-c1n2j

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question