집 >웹 프론트엔드 >JS 튜토리얼 >vue 및 element-ui를 사용하여 테이블 콘텐츠의 페이징을 구현하는 방법

vue 및 element-ui를 사용하여 테이블 콘텐츠의 페이징을 구현하는 방법

亚连원래의: 2018-06-02 09:36:003739검색

아래에서는 vue와 element-ui를 사용하여 테이블 콘텐츠 페이지 매김을 설정하는 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

html code

템플릿에 썼기 때문에, 즉 새로운 구조를 만들어서 코드를 올렸습니다.

<el-pagination 
 small
 layout="prev, pager, next"
 :total="total" 
 @current-change="current_change">
</el-pagination>

코드에서 small은 작은 페이징 스타일 사용 여부를 나타냅니다.

layout은 구성 요소 레이아웃을 나타내며 하위 구성 요소 이름은 쉼표로 구분됩니다.

속성: total은 총 항목 수를 나타냅니다.

Events: current -change는 페이지 번호 변경을 모니터링하는 데 사용되며 내용도 변경되었습니다

다른 속성은 요소 공식 API에서 찾을 수 있습니다

http://element.eleme.io/#/zh-CN/comComponent/pagination

듣기 방법은 메소드로 작성됩니다

methods:{
 created:function(){
  //加载班级的数据
   var url =&#39;http://127.0.0.1:3000/clazz/findAll&#39;;
   //向后台获取数据
   var vm = this;
   $.getJSON(url,function(data){
    vm.clazzInfo = data;
    vm.total = data.length;//设置数据总数目！！！
   }); 
  },
 current_change:function(currentPage){
    this.currentPage = currentPage;
  }
}

URL은 백그라운드에서 Express가 구축한 스캐폴딩에 의해 설정된 경로입니다.

data에 사용된 데이터를 등록합니다

전역적으로 등록했기 때문에 data는 객체를 반환하는 함수입니다

data:function(){
   return {
    total:0,//默认数据总数
    pagesize:7,//每页的数据条数
    currentPage:1,//默认开始页面
   }
  }

데이터를 tbody에 바인딩

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

searchInfo가 제가 받은 Array of 배경 데이터.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

vue 및 element-ui를 사용하여 테이블 콘텐츠의 페이징을 구현하는 방법

관련 기사