Vue 2.0+ElementUI 기반 표 넘 기기 기능 구현
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 가 표 의 페이지 를 넘 기 는 것 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
요소 ui는 수동으로 그림을 업로드할 수 있으며 단일 그림만 업로드할 수 있으며 업로드를 덮어쓸 수 있습니다위 코드:html js css: 단일 덮어쓰기 업로드로 변경, 스타일 이전 동적 전환, 단일 업로드 스타일 전환 필요 없음, 변경 가능 /deep/는 요소ui 등 제3자 구성 요소의 내부 양식을 수정하여 침투시킨다....
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.