การแบ่งหน้าในตาราง

คอมโพเนนต์การแบ่งหน้าในตารางให้วิธีการมาตรฐานในการจัดการตัวควบคุมการแบ่งหน้าในตารางในแอปพลิเคชันของคุณ รวมถึงคุณสมบัติต่างๆ เช่น การเลือกจำนวนแถว การนำทางหน้า และตัวเลือกการป้อนหมายเลขหน้าปัจจุบันที่แก้ไขได้

การใช้งานพื้นฐาน

ชื่อบทบาท	วันที่	สถานะ
No results found Try a different search term.

1 - 10 of 100

<template>
  <div class="spr-h-fit">
    <spr-table :headers="headers" :data-table="data" :full-height="true">
      <template #footer>
        <spr-table-pagination
          v-model:selected-row-count="selectedRowCount"
          v-model:current-page="currentPage"
          :total-items="totalItems"
          :dropdown-selection="dropdownSelection"
          :version="'backend'"
          @previous="handlePrevious"
          @next="handleNext"
        />
      </template>
    </spr-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import SprTable from '@/components/table/table.vue';
import SprTablePagination from '@/components/table/table-pagination/table-pagination.vue';
import tableData from '@/mock/tableData';

const rawData = ref([
  ...Array.from({ length: 100 }, (_, i) => ({
    name: {
      title: `กะ ${i + 1}`,
      subtext: `Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam. รายการ ${i + 1}`,
      image: `https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg`,
    },
    lastUpdate: {
      title: `พ.ย. ${(i % 30) + 1}, 2025`,
      subtext: `Lorem ipsum dolor รายการ ${i + 1}`,
      image: `https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg`,
    },
    status: {
      title: ['สำเร็จ', 'รอดำเนินการ', 'ล้มเหลว'][i % 3],
      subtext: `Lorem ipsum dolor sit amet, consectetur, sed etiam. สถานะ ${i + 1}`,
      image: `https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg`,
    },
  })),
]);

const headers = ref([
  { field: 'name', name: 'ชื่อบทบาท', hasAvatar: true, hasSubtext: true },
  { field: 'lastUpdate', name: 'วันที่' },
  { field: 'status', name: 'สถานะ' },
]);

const totalItems = ref(tableData.value.length);
const currentPage = ref(1);
const dropdownSelection = [
  { text: '10', value: '10' },
  { text: '20', value: '20' },
  { text: '30', value: '30' },
];

const selectedRowCount = ref(10);
const data = ref(rawData.value.slice(0, selectedRowCount.value));

const updateDataTable = () => {
  data.value = rawData.value.slice(
    (currentPage.value - 1) * selectedRowCount.value,
    currentPage.value * selectedRowCount.value,
  );
};

const handlePrevious = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    updateDataTable();
  }
};

const handleNext = () => {
  if (currentPage.value * selectedRowCount.value < totalItems.value) {
    currentPage.value++;
    updateDataTable();
  }
};

watch(selectedRowCount, () => {
  currentPage.value = 1; // รีเซ็ตเป็นหน้าแรกเมื่อจำนวนแถวเปลี่ยน
  updateDataTable();
});

watch(currentPage, (newValue) => {
  if (!currentPage.value) return;
  else if (currentPage.value > Math.ceil(totalItems.value / selectedRowCount.value)) {
    currentPage.value = Math.ceil(totalItems.value / selectedRowCount.value);
  }
  updateDataTable();
});
</script>

ด้วยหน้าปัจจุบันที่แก้ไขได้

คุณสามารถเปิดใช้งานการป้อนหมายเลขหน้าโดยตรงโดยตั้งค่า prop editable-current-page:

ชื่อบทบาท	วันที่	สถานะ
No results found Try a different search term.

Pageof 10

<template>
  <spr-table-pagination
    :selected-row-count="10"
    :total-items="100"
    :current-page="1"
    :editable-current-page="true"
    :dropdown-selection="[
      { text: '10', value: '10' },
      { text: '20', value: '20' },
      { text: '50', value: '50' },
      { text: '100', value: '100' },
    ]"
  />
</template>

API Reference

Props

ชื่อ	ประเภท	ค่าเริ่มต้น	ต้องระบุ	คำอธิบาย
selectedRowCount	number	10	ใช่	จำนวนแถวที่จะแสดงต่อหน้า
totalItems	number	1	ใช่	จำนวนรายการทั้งหมดในชุดข้อมูล
currentPage	number	1	ใช่	หมายเลขหน้าที่ใช้งานอยู่ในปัจจุบัน
dropdownSelection	Array<{ text: string; value: string }>	[ { text: 10, value: 10 }, { text: 20, value: 20 }, { text: 50, value: 50 }, { text: 100, value: 100 }, ]	ใช่	ตัวเลือกที่มีสำหรับแถวต่อหน้า
bordered	boolean	true	ไม่	ว่าจะแสดงเส้นขอบรอบคอมโพเนนต์การแบ่งหน้า
editableCurrentPage	boolean	false	ไม่	เปิดใช้งานการป้อนหมายเลขหน้าโดยตรง

Events

ชื่อ	พารามิเตอร์	คำอธิบาย
update:selectedRowCount	(value: number)	ปล่อยออกมาหากจำนวนแถวต่อหน้าเปลี่ยน
update:currentPage	(value: number)	ปล่อยออกมาหากหมายเลขหน้าปัจจุบันเปลี่ยน
previous	-	ปล่อยออกมาหากปุ่มหน้าก่อนหน้าถูกคลิก
next	-	ปล่อยออกมาหากปุ่มหน้าถัดไปถูกคลิก