diff --git a/packages/components/pagination/src/components/pager.ts b/packages/components/pagination/src/components/pager.ts
new file mode 100644
index 0000000000..438e2a7026
--- /dev/null
+++ b/packages/components/pagination/src/components/pager.ts
@@ -0,0 +1,23 @@
+import { buildProps } from '@element-plus/utils'
+import type { ExtractPropTypes } from 'vue'
+import type Pager from './pager.vue'
+
+export const paginationPagerProps = buildProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  pageCount: {
+    type: Number,
+    required: true,
+  },
+  pagerCount: {
+    type: Number,
+    default: 7,
+  },
+  disabled: Boolean,
+} as const)
+
+export type PaginationPagerProps = ExtractPropTypes<typeof paginationPagerProps>
+
+export type PagerInstance = InstanceType<typeof Pager>
diff --git a/packages/components/pagination/src/components/pager.vue b/packages/components/pagination/src/components/pager.vue
index 8d0d1fe200..fd4f71901c 100644
--- a/packages/components/pagination/src/components/pager.vue
+++ b/packages/components/pagination/src/components/pager.vue
@@ -67,168 +67,118 @@
     </li>
   </ul>
 </template>
-<script lang="ts">
-import { computed, defineComponent, ref, watchEffect } from 'vue'
+<script lang="ts" setup>
+import { computed, ref, watchEffect } from 'vue'
 import { DArrowLeft, DArrowRight, MoreFilled } from '@element-plus/icons-vue'
 import { useNamespace } from '@element-plus/hooks'
-
-const paginationPagerProps = {
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  pageCount: {
-    type: Number,
-    required: true,
-  },
-  pagerCount: {
-    type: Number,
-    default: 7,
-  },
-  disabled: Boolean,
-} as const
-
-export default defineComponent({
+import { paginationPagerProps } from './pager'
+defineOptions({
   name: 'ElPaginationPager',
-
-  components: {
-    DArrowLeft,
-    DArrowRight,
-    MoreFilled,
-  },
-  props: paginationPagerProps,
-  emits: ['change'],
-
-  setup(props, { emit }) {
-    const nsPager = useNamespace('pager')
-    const nsIcon = useNamespace('icon')
-
-    const showPrevMore = ref(false)
-    const showNextMore = ref(false)
-    const quickPrevHover = ref(false)
-    const quickNextHover = ref(false)
-
-    const pagers = computed(() => {
-      const pagerCount = props.pagerCount
-      const halfPagerCount = (pagerCount - 1) / 2
-      const currentPage = Number(props.currentPage)
-      const pageCount = Number(props.pageCount)
-
-      let showPrevMore = false
-      let showNextMore = false
-      if (pageCount > pagerCount) {
-        if (currentPage > pagerCount - halfPagerCount) {
-          showPrevMore = true
-        }
-        if (currentPage < pageCount - halfPagerCount) {
-          showNextMore = true
-        }
-      }
-      const array: number[] = []
-      if (showPrevMore && !showNextMore) {
-        const startPage = pageCount - (pagerCount - 2)
-        for (let i = startPage; i < pageCount; i++) {
-          array.push(i)
-        }
-      } else if (!showPrevMore && showNextMore) {
-        for (let i = 2; i < pagerCount; i++) {
-          array.push(i)
-        }
-      } else if (showPrevMore && showNextMore) {
-        const offset = Math.floor(pagerCount / 2) - 1
-        for (let i = currentPage - offset; i <= currentPage + offset; i++) {
-          array.push(i)
-        }
-      } else {
-        for (let i = 2; i < pageCount; i++) {
-          array.push(i)
-        }
-      }
-
-      return array
-    })
-
-    watchEffect(() => {
-      const halfPagerCount = (props.pagerCount - 1) / 2
-
-      showPrevMore.value = false
-      showNextMore.value = false
-
-      if (props.pageCount > props.pagerCount) {
-        if (props.currentPage > props.pagerCount - halfPagerCount) {
-          showPrevMore.value = true
-        }
-        if (props.currentPage < props.pageCount - halfPagerCount) {
-          showNextMore.value = true
-        }
-      }
-    })
-
-    function onMouseenter(direction: 'left' | 'right') {
-      if (props.disabled) return
-      if (direction === 'left') {
-        quickPrevHover.value = true
-      } else {
-        quickNextHover.value = true
-      }
-    }
-
-    function onEnter(e: UIEvent) {
-      const target = e.target as HTMLElement
-      if (
-        target.tagName.toLowerCase() === 'li' &&
-        Array.from(target.classList).includes('number')
-      ) {
-        const newPage = Number(target.textContent)
-        if (newPage !== props.currentPage) {
-          emit('change', newPage)
-        }
-      }
-    }
-
-    function onPagerClick(event: UIEvent) {
-      const target = event.target as HTMLElement
-      if (target.tagName.toLowerCase() === 'ul' || props.disabled) {
-        return
-      }
-
-      let newPage = Number(target.textContent)
-      const pageCount = props.pageCount
-      const currentPage = props.currentPage
-      const pagerCountOffset = props.pagerCount - 2
-      if (target.className.includes('more')) {
-        if (target.className.includes('quickprev')) {
-          newPage = currentPage - pagerCountOffset
-        } else if (target.className.includes('quicknext')) {
-          newPage = currentPage + pagerCountOffset
-        }
-      }
-      if (!Number.isNaN(+newPage)) {
-        if (newPage < 1) {
-          newPage = 1
-        }
-        if (newPage > pageCount) {
-          newPage = pageCount
-        }
-      }
-      if (newPage !== currentPage) {
-        emit('change', newPage)
-      }
-    }
-
-    return {
-      showPrevMore,
-      showNextMore,
-      quickPrevHover,
-      quickNextHover,
-      pagers,
-      nsPager,
-      nsIcon,
-
-      onMouseenter,
-      onPagerClick,
-      onEnter,
-    }
-  },
 })
+const props = defineProps(paginationPagerProps)
+const emit = defineEmits(['change'])
+const nsPager = useNamespace('pager')
+const nsIcon = useNamespace('icon')
+const showPrevMore = ref(false)
+const showNextMore = ref(false)
+const quickPrevHover = ref(false)
+const quickNextHover = ref(false)
+const pagers = computed(() => {
+  const pagerCount = props.pagerCount
+  const halfPagerCount = (pagerCount - 1) / 2
+  const currentPage = Number(props.currentPage)
+  const pageCount = Number(props.pageCount)
+  let showPrevMore = false
+  let showNextMore = false
+  if (pageCount > pagerCount) {
+    if (currentPage > pagerCount - halfPagerCount) {
+      showPrevMore = true
+    }
+    if (currentPage < pageCount - halfPagerCount) {
+      showNextMore = true
+    }
+  }
+  const array: number[] = []
+  if (showPrevMore && !showNextMore) {
+    const startPage = pageCount - (pagerCount - 2)
+    for (let i = startPage; i < pageCount; i++) {
+      array.push(i)
+    }
+  } else if (!showPrevMore && showNextMore) {
+    for (let i = 2; i < pagerCount; i++) {
+      array.push(i)
+    }
+  } else if (showPrevMore && showNextMore) {
+    const offset = Math.floor(pagerCount / 2) - 1
+    for (let i = currentPage - offset; i <= currentPage + offset; i++) {
+      array.push(i)
+    }
+  } else {
+    for (let i = 2; i < pageCount; i++) {
+      array.push(i)
+    }
+  }
+  return array
+})
+watchEffect(() => {
+  const halfPagerCount = (props.pagerCount - 1) / 2
+  showPrevMore.value = false
+  showNextMore.value = false
+  if (props.pageCount! > props.pagerCount) {
+    if (props.currentPage > props.pagerCount - halfPagerCount) {
+      showPrevMore.value = true
+    }
+    if (props.currentPage < props.pageCount! - halfPagerCount) {
+      showNextMore.value = true
+    }
+  }
+})
+function onMouseenter(direction: 'left' | 'right') {
+  if (props.disabled) return
+  if (direction === 'left') {
+    quickPrevHover.value = true
+  } else {
+    quickNextHover.value = true
+  }
+}
+function onEnter(e: UIEvent) {
+  const target = e.target as HTMLElement
+  if (
+    target.tagName.toLowerCase() === 'li' &&
+    Array.from(target.classList).includes('number')
+  ) {
+    const newPage = Number(target.textContent)
+    if (newPage !== props.currentPage) {
+      emit('change', newPage)
+    }
+  }
+}
+function onPagerClick(event: UIEvent) {
+  const target = event.target as HTMLElement
+  if (target.tagName.toLowerCase() === 'ul' || props.disabled) {
+    return
+  }
+  let newPage = Number(target.textContent)
+  const pageCount = props.pageCount!
+  const currentPage = props.currentPage
+  const pagerCountOffset = props.pagerCount - 2
+  if (target.className.includes('more')) {
+    if (target.className.includes('quickprev')) {
+      newPage = currentPage - pagerCountOffset
+    } else if (target.className.includes('quicknext')) {
+      newPage = currentPage + pagerCountOffset
+    }
+  }
+  if (!Number.isNaN(+newPage)) {
+    if (newPage < 1) {
+      newPage = 1
+    }
+    if (newPage > pageCount) {
+      newPage = pageCount
+    }
+  }
+  if (newPage !== currentPage) {
+    emit('change', newPage)
+  }
+}
 </script>