В начальной версии компонента вы могли просто сказать, какое свойство заданных данных должно быть отображено в каком столбце. Вот небольшой пример:
<table-component
:data="[
{ id: 1, firstName: 'John' },
{ id: 2, firstName: 'Paul' },
{ id: 3, firstName: 'George' },
{ id: 4, firstName: 'Ringo' },
]"
>
<table-column show="firstName" label="First name"></table-column>
</table-component>
Это будет отображать простую таблицу с одним столбцом (с заголовком «Имя») и строкой для каждого Beatle. Это хорошо для простых данных, но вы хотите отобразить изображение, которого нет непосредственно в данных. Например, ссылка на страницу редактирования. В предыдущей версии компонента вам приходилось вручную готовить этот html и помещать его в данные. Типа отстой.
В последней версии компонента вы можете использовать слоты с заданной областью для рендеринга данных. Вот как им пользоваться.
<table-component
:data="[
{ id: 1, firstName: 'John' },
{ id: 2, firstName: 'Paul' },
{ id: 3, firstName: 'George' },
{ id: 4, firstName: 'Ringo' },
]"
>
<table-column label="First name">
<template scope="row">
<a :href=`/edit${row.id}`>{{ row.firstName }}</a>
</template>
</table-column>
</table-component>
Намного лучше!
Асинхронная загрузка данных
В предыдущей версии табличного компонента единственным способом получить в него данные была передача объекта в data
опоре table-component
. Для проекта, над которым мы тогда работали, этого было достаточно. Но для следующего проекта нам нужно было загрузить данные, поступающие с сервера, поэтому мы решили добавить поддержку асинхронной загрузки данных.
В дополнение к принятию объектов опора data
для table-component
теперь может обрабатывать функцию. Эта функция получит объект с filter
, sort
и page
. Вы можете использовать эти свойства этого объекта для получения нужных данных. Эта функция должна возвращать объект с ключом data
, содержащий данные, которые должны отображаться. Если вы вернете свойство pagination
, компонент также отобразит некоторые ссылки для пагинации.
Вот пример использования популярной библиотеки HTTP-запросов Axios для получения данных с сервера:
<template>
<div id="app">
<table-component :data="fetchData">
<table-column show="firstName" label="First name"></table-column>
</table-component>
</div>
</template>
<script>
import axios from 'axios';
export default {
methods: {
async fetchData({ page, filter, sort }) {
const response = await axios.get('/my-endpoint', { page });
// An object that has a `data` and an optional `pagination` property
return response;
}
}
}
</script>
В заключение
Наша цель в этом компоненте - сделать его максимально удобным для разработчиков. Так что, возможно, у него не так много функций, но работать с ним определенно интересно. Если вы хотите узнать больше о нашем компоненте, загляните в readme на GitHub. Нужен компонент таблицы, но не нравится наш? Вот хороший список альтернатив.