Значки изменения страниц PrimeVue Datatable
У меня есть таблица данных PrimeVue в моем приложении API композиции Vue 3. Я использую нестилизованный режим и пресет Лары.
Я установил для пагинатора значение true, и он работает нормально. Однако я хочу использовать разные значки для кнопок нумерации страниц.
В отличие от старых версий Prime, значки теперь представляют собой SVG-код непосредственно внутри элементов кнопок.
Во многих случаях мне удавалось использовать шаблон, например template #sorticon, для замены значков, но я не мог понять, как заменить кнопки листания.
<DataTable
v-model:filters = "filters"
:value = "users"
removableSort
tableStyle = "min-width: 65rem"
tableClass = "tableHover"
stripedRows
paginator
:rows = "10"
size = "small"
:rowsPerPageOptions = "[5, 10, 20]"
:filters = "filters"
dataKey = "id"
:loading = "loading"
:global-filter-fields = "['username', 'first_name', 'last_name', 'email', 'role']"
paginatorTemplate = "CurrentPageReport FirstPageLink PrevPageLink JumpToPageDropdown NextPageLink LastPageLink"
currentPageReportTemplate = "Showing {first} to {last} of {totalRecords}"
>
<template #empty> No users found. </template>
<template #loading> Loading users data. Please wait. </template>
<Column field = "username" sortable header = "Username">
<template #sorticon = "{ sortOrder }">
<SortIcon
:name = "sortOrder === 1 ? 'sort-asc' : sortOrder === -1 ? 'sort-desc' : 'sort-unsorted'"
/> </template
></Column>
... other columns ...
</DataTable>
Ответы 2
Primevue DataTable API определяет следующие слоты, которые вы можете использовать для настройки значков кнопок Paginator:
<DataTable paginator>
<template #paginatorfirstpagelinkicon>First</template>
<template #paginatornextpagelinkicon>Next</template>
<template #paginatorprevpagelinkicon>Prev</template>
<template #paginatorlastpagelinkicon>Last</template>
</DataTable>
Обратите внимание, что приведенные выше шаблоны доступны только в том случае, если вы используете отдельный компонент Paginator, а не в том случае, если вы просто установили paginator=true в таблице данных.
мне нужно было сделать
[data-pc-section='previouspagebutton']::before {
content: '\f0d9';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
Стив, какая у тебя версия PrimeVue? Я определенно мог что-то упустить, но документы, на которые я ссылаюсь, указывают, что слоты находятся непосредственно внутри компонента DataTable, а не компонента Paginator. (Для одиночного Paginator слотами являются firsticon, previcon, nexticon иlasticon — см. primevue.org/paginator/#api.paginator.slots)
Не уверен, есть ли для этого API, не знаком с Primevue. Проблемы с Github могут помочь в этом, но, может быть, попробовать переопределить это с помощью CSS?