이 문서에서는 Vue3, element-ui 및 TypeScript를 사용하여 전역 페이지 매김 구성 요소를 캡슐화하는 방법을 설명합니다.
환경 의존적
시작하기 전에 다음 환경을 설치해야 합니다.
- 보기 3
- 요소 UI
- 타입스크립트
구성 요소 기능
이 페이징 구성 요소는 다음 기능을 제공합니다.
- 각 페이지에 표시되는 항목 수 사용자 지정 지원
- 지정된 페이지 번호로 사용자 지정 점프 지원
- 총 페이지 수 및 총 항목 수 표시 지원
- 사용자 지정 스타일 지원
구성 요소 구현
페이징 구성 요소 구조
페이지 매김 구성 요소는 다음 부분으로 구성됩니다.
<template>
<div class="pagination">
<el-pagination
:total="total"
:page-size="pageSize"
:current-page.sync="currentPage"
:layout="'total, sizes, prev, pager, next, jumper'"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
페이징 구성 요소 속성
페이지 매김 구성 요소는 다음 속성을 제공합니다.
| 속성 이름 | 유형 | 기본값 | 설명하다 |
|---|---|---|---|
| 총 | 숫자 | 0 | 총 수 |
| 페이지 크기 | 숫자 | 10 | 페이지당 표시되는 항목 수 |
| 현재 페이지 | 숫자 | 1 | 현재 페이지 번호 |
페이지 매김 구성 요소 방법
페이지 매김 구성 요소는 다음 메서드를 제공합니다.
| 메서드 이름 | 설명하다 |
|---|---|
| 핸들 크기 변경 | 페이지당 표시 항목 수가 변경될 때 트리거됨 |
| handleCurrentChange | 페이지 번호가 변경될 때 트리거됨 |
페이지 매김 구성 요소 스타일
다음 스타일을 수정하여 페이지 매김 구성 요소의 스타일을 사용자 지정할 수 있습니다.
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
.el-pagination__sizes {
display: flex;
align-items: center;
margin-left: 20px;
}
.el-pagination__jump {
margin-left: 20px;
}
.el-pagination__total {
margin-right: 20px;
}
페이지 매김 구성 요소 사용
페이지 매김 구성 요소를 사용하는 것은 매우 간단합니다. Vue 구성 요소에 캡슐화된 Pagination 구성 요소를 도입한 다음 템플릿에서 사용하기만 하면 됩니다.
<template>
<div class="page">
<pagination
:total="total"
:page-size="pageSize"
:current-page.sync="currentPage"
/>
</div>
</template>
<script lang="ts">
import {
defineComponent, ref } from 'vue'
import Pagination from '@/components/Pagination.vue'
export default defineComponent({
name: 'Page',
components: {
Pagination,
},
setup() {
const total = ref(1000)
const pageSize = ref(10)
const currentPage = ref(1)
return {
total,
pageSize,
currentPage,
}
},
})
</script>
요약하다
이 문서에서는 Vue3, element-ui 및 TypeScript를 사용하여 전역 페이지 매김 구성 요소를 캡슐화하는 방법을 설명합니다. 필요에 따라 제공되는 페이지 매김 구성 요소의 스타일과 속성을 수정할 수 있습니다.