집 >웹 프론트엔드 >JS 튜토리얼 >Vue2.0, ElementUI는 테이블 페이지 넘김을 구현합니다.

Vue2.0, ElementUI는 테이블 페이지 넘김을 구현합니다.

小云云원래의: 2018-01-04 10:21:422116검색

이 글에서는 주로 테이블 페이지 넘김을 구현하는 Vue2.0+ElementUI의 예를 소개합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

ElementUI의 테이블에는 사전 배열 데이터 유형이 필요합니다. 저는 python3을 사용하여 백엔드를 작성했으므로 데이터베이스에서 데이터를 가져올 때 단지 커서클래스=pymysql.cursors.DictCursor 줄을 추가하기만 하면 됩니다. 꺼낸 후 나중에 쉽게 접근할 수 있도록 redis 데이터베이스에 저장했습니다. 검색할 때 eval() 함수를 사용한 다음 이를 프런트 엔드에 전달하면 됩니다.

페이지 매김 호출기는 프런트 엔드에 배치되어 있으며 여기서는 모든 기능을 갖춘 호출기를 직접 사용합니다.

<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>

그 중, handlerSizeChange는 페이지 크기가 변경될 때 해당 함수이고, handlerCurrentChange는 currentPage가 변경될 때 해당 함수입니다.

페이지 크기는 모두 선택 가능한 페이지 크기입니다. 숫자를 직접 변경할 수 있습니다.

레이아웃은 포함된 기능이므로 일반적으로 터치할 필요가 없습니다.

total은 전체 데이터 개수입니다. 딕셔너리 배열이므로 length 메소드를 직접 사용하여 총 데이터 개수를 구할 수 있습니다.

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

초기 페이지 currentPage, 페이지 페이지 크기당 초기 데이터 수 및 데이터 데이터

 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)*현재 페이지까지의 데이터 수*페이지당 데이터 수를 입력해야 합니다. 검색하려면 슬라이스 메소드를 사용하십시오.

스트라이프는 지브라 패턴이 돋보이는 테이블이에요.

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

열 태그. 각 열을 제어하기 위해 여러 항목을 배치할 수 있습니다. label은 첫 번째 행에 표시되는 열의 이름입니다. prop은 데이터의 키 이름입니다.

최종 결과.

Vue2.0, ElementUI는 테이블 페이지 넘김을 구현합니다.

관련 기사