Pagination 分页

<template>
  <a-pagination v-model:current="current" :total="50" show-less-items />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    return {
      current: ref(2),
    };
  },
});
</script>

<template>
  <a-pagination v-model:current="current" :total="500" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    return {
      current: ref(6),
    };
  },
});
</script>

<template>
  <div>
    <a-pagination
      show-size-changer
      v-model:current="current1"
      v-model:pageSize="pageSize"
      :total="500"
      @showSizeChange="onShowSizeChange"
    />
    <br />
    <a-pagination
      v-model:current="current2"
      show-size-changer
      :total="500"
      disabled
      @showSizeChange="onShowSizeChange"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  setup() {
    const pageSize = ref(20);
    const current1 = ref(3);
    const current2 = ref(4);
    const onShowSizeChange = (current: number, pageSize: number) => {
      console.log(current, pageSize);
    };
    watch(pageSize, () => {
      console.log('pageSize', pageSize.value);
    });
    watch(current1, () => {
      console.log('current', current1.value);
    });
    return {
      pageSize,
      current1,
      current2,
      onShowSizeChange,
    };
  },
});
</script>

<template>
  <a-pagination
    v-model:current="current"
    :page-size-options="pageSizeOptions"
    :total="total"
    show-size-changer
    :page-size="pageSize"
    @showSizeChange="onShowSizeChange"
  >
    <template #buildOptionText="props">
      <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
      <span v-else>全部</span>
    </template>
  </a-pagination>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const pageSizeOptions = ref<string[]>(['10', '20', '30', '40', '50']);
    const current = ref(1);
    const pageSizeRef = ref(10);
    const total = ref(50);
    const onShowSizeChange = (current: number, pageSize: number) => {
      console.log(pageSize);
      pageSizeRef.value = pageSize;
    };

    return {
      pageSizeOptions,
      current,
      pageSize: pageSizeRef,
      total,
      onShowSizeChange,
    };
  },
});
</script>

<template>
  <div>
    <a-pagination show-quick-jumper v-model:current="current1" :total="500" @change="onChange" />
    <br />
    <a-pagination
      show-quick-jumper
      v-model:current="current2"
      :total="500"
      disabled
      show-less-items
      @change="onChange"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const current1 = ref<number>(1);
    const current2 = ref<number>(2);
    const onChange = (pageNumber: number) => {
      console.log('Page: ', pageNumber);
    };
    return {
      current1,
      current2,
      onChange,
    };
  },
});
</script>

<template>
  <div id="components-pagination-demo-mini">
    <a-pagination size="small" :total="50" />
    <a-pagination size="small" :total="50" show-size-changer show-quick-jumper />
    <a-pagination size="small" :total="50" :show-total="total => `Total ${total} items`" />
  </div>
</template>

<style scoped>
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
  margin-bottom: 24px;
}
</style>

<template>
  <a-pagination simple v-model:current="current" :total="50" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const current = ref<number>(2);
    return {
      current,
    };
  },
});
</script>

<template>
  <div>
    <a-pagination
      :total="85"
      :show-total="total => `Total ${total} items`"
      :page-size="20"
      v-model:current="current1"
    />
    <br />
    <a-pagination
      :total="85"
      :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`"
      :page-size="20"
      v-model:current="current2"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const current1 = ref<number>(1);
    const current2 = ref<number>(2);
    const onChange = (pageNumber: number) => {
      console.log('Page: ', pageNumber);
    };
    return {
      current1,
      current2,
      onChange,
    };
  },
});
</script>

<template>
  <a-pagination :total="500">
    <template #itemRender="{ page, type, originalElement }">
      <a v-if="type === 'prev'">Previous</a>
      <a v-else-if="type === 'next'">Next</a>
      <renderVNode v-else :vnode="originalElement"></renderVNode>
    </template>
  </a-pagination>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

function renderVNode(_, { attrs: { vnode } }) {
  return vnode;
}
export default defineComponent({
  components: {
    renderVNode,
  },
});
</script>