Vue 2.0+Element UI 가 표 페이지 를 넘 기 는 인 스 턴 스 를 실현 합 니 다.

ElementUI 의 표 에서 요구 하 는 데이터 형식 은 사전 배열 입 니 다.python 3 쓰기 백 엔 드 를 사 용 했 습 니 다.데이터베이스 에서 데 이 터 를 가 져 올 때 cursor class=pymy sql.cursor.DictCursor 를 추가 하면 됩 니 다.꺼 낸 후에 나 는 그것 을 redis 데이터베이스 에 편리 하 게 저장 한 후에 사용 할 것 이다.사용 할 때 eval()함 수 를 사용 하여 전단 으로 전달 하면 됩 니 다.
전단 에 Pagination 페이지 기 를 설치 하고 저 는 완전한 기능 의 페이지 기 를 직접 사용 합 니 다.

<el-pagination
 @size-change="handleSizeChange" 
 @current-change="handleCurrentChange" 
 :current-page="currentPage" 
 :page-sizes="[10, 20, 50, 100]" 
 :page-size="pagesize" 
 layout="total, sizes, prev, pager, next, jumper" 
 :total="data.length"> 
</el-pagination> 

그 중에서 handle Size Change 는 pagesize 가 변 경 될 때의 해당 함수 이 고 handle Current Change 는 currentPage 가 변 경 될 때의 해당 함수 입 니 다.
page-size 는 선택 할 수 있 는 모든 page-size 입 니 다.그 중의 숫자 를 스스로 변경 할 수 있다.
layot 는 부대 적 인 기능 으로 일반적으로 그것 을 건 드 리 지 않 아 도 된다.
토 탈 은 총 데이터 수 입 니 다.사전 배열 이기 때문에 length 방법 을 직접 사용 하면 총 데이터 수 를 얻 을 수 있 습 니 다.

data () { 
 return { 
 data: [], 
 currentPage:1, 
 pagesize:20, 
 
 } 
}, 

초기 페이지 currentPage,초기 페이지 데이터 수 pagesize 와 데이터 data

 methods: { 
 handleSizeChange: function (size) { 
 this.pagesize = size; 
 }, 
 handleCurrentChange: function(currentPage){ 
 this.currentPage = currentPage; 
 } 
} 

위의 두 개의 응답 함수 가 이해 하기 쉽다.

<el-table
 :data="data.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
 stripe 
 style="width: 100%"> 

el-table 태그.계산 을 통 해 쉽게 얻 을 수 있 습 니 다.페이지 에 해당 하 는 데 이 터 를 표시 하려 면 아래 표 시 는(현재 페이지-1)*각 페이지 의 데 이 터 를 현재 페이지*각 페이지 의 데이터 수 로 세 어야 합 니 다.slice 방법 으로 사용 합 니 다.
stripe 는 얼룩말 무늬 표 입 니 다.

<el-table-column
 prop="id" 
 label="  " 
 align="center"> 
</el-table-column> 

column 태그.여러 개 넣 을 수 있 고 열 마다 제어 할 수 있 습 니 다.label 은 이 열 이름 으로 첫 줄 에 표 시 됩 니 다.prop 는 data 의 한 key 의 이름 입 니 다.

최후 의 성과.
위의 Vue 2.0+ElementUI 가 표 의 페이지 를 넘 기 는 실례 를 실현 하 는 것 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 많은 응원 을 바 랍 니 다.