Использование композитной функции для настройки нижнего колонтитула таблицы vue3-easy-data-table

Прежде чем начать этот урок, пожалуйста, убедитесь, что вы знаете, как использовать vue3-easy-data-table, вы можете посмотреть документ здесь.

Прежде всего, нам нужно установить и импортировать use-vue3-easy-data-table, который предоставляет композитные функции, связанные с настройкой.

npm install use-vue3-easy-data-table

Вход в полноэкранный режим Выход из полноэкранного режима

Содержание

Демонстрация:
Часть сценария:
Часть шаблона:
Стилевая часть

Демонстрация:

Часть сценария:

<script lang="ts" setup>
import type { Header, Item } from "vue3-easy-data-table";
import { computed, ref } from "vue";
import { mockClientItems } from "../mock";
import { usePagination } from "use-vue3-easy-data-table";
import type { UsePaginationReturn } from "use-vue3-easy-data-table";

const dataTable = ref();

const {
  currentPageFirstIndex,
  currentPageLastIndex,
  clientItemsLength,
  maxPaginationNumber,
  currentPaginationNumber,
  isFirstPage,
  isLastPage,
  nextPage,
  prevPage,
  updatePage,
}: UsePaginationReturn = usePagination(dataTable);

const headers: Header[] = [
  { text: "Name", value: "name" },
  { text: "Address", value: "address" },
  { text: "Height", value: "height", sortable: true },
  { text: "Weight", value: "weight", sortable: true },
  { text: "Age", value: "age", sortable: true },
  { text: "Favourite sport", value: "favouriteSport" },
  { text: "Favourite fruits", value: "favouriteFruits" },
];

const items: Item[] = mockClientItems(200);
</script>

Вход в полноэкранный режим Выход из полноэкранного режима

Из вышеизложенного видно, что сначала мы используем переменную dataTable для получения ссылки на DOM-элементы таблицы. Затем мы используем dataTable в качестве параметра usePagination, которая является композитной функцией, возвращающей переменные и функции, связанные с колонтитулами таблиц:

Переменные usePagination возвращают все реактивные переменные, например, если вы вызовете функцию nextPage, то переменные currentPageFirstIndex, currentPageLastIndex и currentPaginationNumber будут обновлены, так что в конечном итоге вы можете использовать эти переменные в шаблоне и написать код стиля для настройки вашего собственного колонтитула таблицы:

Часть шаблона:

<template>
  <EasyDataTable
    ref="dataTable"
    :headers="headers"
    :items="items"
    :rows-per-page="10"
    hide-footer
  />

  <div class="customize-footer">
    <div class="customize-index">
      Now displaying: {{currentPageFirstIndex}} ~ {{currentPageLastIndex}} of {{clientItemsLength}}
    </div>

    <div class="customize-buttons">
      <span
        v-for="paginationNumber in maxPaginationNumber"
        class="customize-button"
        :class="{'active': paginationNumber === currentPaginationNumber}"
        @click="updatePage(paginationNumber)"
      >
        {{paginationNumber}}
      </span>
    </div>

    <div class="customize-pagination">
      <button class="prev-page" @click="prevPage" :disabled="isFirstPage">prev page</button>
      <button class="next-page" @click="nextPage" :disabled="isLastPage">next page</button>
    </div>
  </div>
</template>

Вход в полноэкранный режим Выход из полноэкранного режима

Стилевая часть

<style scoped>
.customize-footer {
  margin: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.customize-footer div {
  margin: 5px;
}
.customize-button {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 100%;
  cursor: pointer;
  padding: 3px;
  line-height: 20px;
}
.customize-button.active {
  color: #fff;
  background-color: #3db07f;
}
.customize-pagination button {
  margin: 0 5px;
  cursor: pointer;
}
</style>

Войти в полноэкранный режим Выход из полноэкранного режима

Если вас интересует vue3-easy-data-table, пожалуйста, ознакомьтесь с документом здесь: https://hc200ok.github.io/vue3-easy-data-table-doc/.

И очень благодарен, если вы можете дать мне Github ⭐ для поддержки меня, ссылка на репозиторий：https://github.com/HC200ok/vue3-easy-data-table/