Vue 3 Composition API中替换PrimeVue Datatable分页器图标

在PrimeVue的unstyled模式下，分页器的图标可以通过**插槽（Slot）**自定义，针对分页器不同按钮有对应的专属插槽，用法和你替换排序图标的逻辑一致：

可用的分页器图标插槽 #

PrimeVue Datatable为分页按钮提供了以下插槽用于替换图标：

• #firstpageicon：第一页按钮图标
• #prevpageicon：上一页按钮图标
• #nextpageicon：下一页按钮图标
• #lastpageicon：最后一页按钮图标

实现示例 #

直接在DataTable组件内部添加这些插槽即可，示例代码如下：

<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>

  <!-- 新增分页图标自定义插槽 -->
  <template #firstpageicon>
    <!-- 替换为你的自定义图标组件，比如项目内的Icon组件或PrimeIcons -->
    <FirstPageIcon />
  </template>

  <template #prevpageicon>
    <PrevPageIcon />
  </template>

  <template #nextpageicon>
    <NextPageIcon />
  </template>

  <template #lastpageicon>
    <LastPageIcon />
  </template>

  ... other columns ...
</DataTable>

额外说明 #

• 如果使用PrimeIcons，可以直接用<PrimeIcon>组件指定图标名称，比如<PrimeIcon icon="pi pi-angle-double-left" />
• 若图标尺寸和按钮不匹配，可添加自定义CSS类调整样式

内容的提问来源于stack exchange，提问作者Steve