Vue 2.0+ElementUI 기반 표 넘 기기 기능 구현

Element UI 는 Vue 2.0 을 기본 프레임 워 크 로 실현 하 는 구성 요소 라 이브 러 리 로 기업 급 배경 응용 을 대상 으로 사 이 트 를 신속하게 구축 하고 연구 개발 의 인력 과 시간 원 가 를 크게 줄 일 수 있 습 니 다.이번 달 NingJS 에서 우 리 는 이 프로젝트 를 개 원 했 는데,당시 그것 의 문 서 는 아직 준비 되 지 않 았 다.오늘,2 주 이상 의 보완 을 거 쳐 Element UI 의 문서 가 정식으로 출시 되 었 습 니 다!현재 rc 단계 에 있 으 며,정식 판 은 Vue 2.0 발표 후 가장 먼저 따라 갈 것 이다.여러분 이 사용 하고 보완 하 는 것 을 환영 합 니 다.함께 Vue 최고의 기업 급 구성 요소 라 이브 러 리 로 만 듭 니 다.
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 가 표 의 페이지 를 넘 기 는 것 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!