ترقيم الصفحات Pagination

تنقّل تصفّح البيانات مقسّماً إلى صفحات. يدعم عرض الإجمالي، وتبديل عدد العناصر في الصفحة، والقفز إلى صفحة، والوضع المضغوط.

ترقيم الصفحات

<template>
  <div class="demo-col" style="gap: 20px">
    <LhPagination :total="total" :current.sync="current" :page-size="pageSize" />
    <p class="demo-note">current={{ current }}، pageSize={{ pageSize }}</p>
    <LhPagination
      :total="total"
      show-total
      show-size-changer
      show-jumper
      :page-sizes="[10, 20, 50, 100]"
      :current.sync="current2"
      @change="onChange"
    />
    <p class="demo-note">showTotal + showSizeChanger + showJumper؛ حدث change: {{ lastChange }}</p>
    <LhPagination :total="total" simple :current.sync="current3" />
    <p class="demo-note">simple الوضع المضغوط</p>
    <LhPagination :total="total" disabled :current.sync="current4" />
    <p class="demo-note">disabled معطّل</p>
  </div>
</template>

<script>
export default {
  data: () => ({
    total: 128,
    current: 3,
    pageSize: 10,
    current2: 1,
    current3: 2,
    current4: 1,
    lastChange: '(لا شيء)',
  }),
  methods: {
    onChange(page, size) {
      this.lastChange = `الصفحة ${page}، ${size} عنصراً في الصفحة`
    },
  },
}
</script>

Props

خاصية	الوصف	النوع	الافتراضي
total	إجمالي عدد العناصر (مطلوب)	number	—
pageSize	عدد العناصر في الصفحة	number	—
current	الصفحة الحالية (:current.sync، اسم الحدث update:current)	number	—
pageSizes	خيارات عدد العناصر في الصفحة	number[]	—
showTotal	هل يُظهر إجمالي العدد	boolean	false
showSizeChanger	هل يُظهر مبدّل عدد العناصر في الصفحة	boolean	false
showJumper	هل يُظهر حقل القفز إلى صفحة	boolean	false
simple	الوضع المضغوط	boolean	false
disabled	هل معطّل	boolean	false
sx	خصائص تخطيط سريعة عبر sx	—	—

Events

حدث	الوصف	معامل الاستدعاء
change	تغيّر رقم الصفحة أو عدد العناصر في الصفحة	(الصفحة الحالية, حجم الصفحة)