Vue 구성 요소 라 이브 러 리 ElementUI 표 목록 페이지 효과 구현

Element UI 는 표 목록 의 페이지 효과 튜 토리 얼 을 실현 합 니 다.참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
Element UI 는 Vue 2.0 을 기본 프레임 워 크 로 구현 하 는 구성 요소 라 이브 러 리 로 개발 자,디자이너,제품 매니저 를 위 한 Vue 2.0 기반 구성 요소 라 이브 러 리 로 부대 디자인 자원 을 제공 하여 사이트 의 빠 른 성형 을 도 왔 다.
에@size-change="handle SizeChange,@current-change="handle CurrentChange"현재 페이지 와 현재 페이지 의 변경 이벤트 처리

<!--  -->
<div class="formTable" id="formTable">
<el-table
  ref="Table"
  :data="apprItemData"
  :header-cell-style="headClass"
         row-key="approveItem"
         :tree-props="{children: 'children'}"
         height="420"
  border>
 <el-table-column
   type="selection"
   width="55">
 </el-table-column>
 <el-table-column
   label="  "
   width="60"
   align="center">
  <template slot-scope="scope">{{scope.$index+1}}</template>
 </el-table-column>
 <el-table-column
   prop="itemCode"
   label="  ">
 </el-table-column>
 <el-table-column
   prop="approveName"
   label="    ">
 </el-table-column>
</el-table>
</div>
<!--    -->
<div class="pagination">
 <el-pagination
   background
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   :page-sizes="[5,10, 15, 20, 25]"
   :page-size="pageSize"
   layout="total, sizes, prev, pager, next, jumper"
   :total="totalRow">
 </el-pagination>
</div>

<script type="text/babel">
 var vm = new Vue({
     el: '#app',
     data:{
         apprItemData : [],
         currentPage: 1,  //   
         totalRow: 0, //   
         pageSize: 10 //      
     },
     computed: {},
     watch: {},
     created() {},
     mounted() {
         this.loadItemData();
},
     methods: {
         //     
loadItemData () {
             var pageSize = this.pageSize;
             var currentPage = this.currentPage;
             console.log("pageSize:"+pageSize+",currentPage:"+currentPage);
 //debugger;
 var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
             $.ajax({
                 type: 'get',
                 url:geturl,
                 contentType: "application/json; charset=utf-8",
                 success: function(data) {
                     //debugger;
                     console.log("totalRow:"+data.total);
                     vm.apprItemData = data.rows;
                     vm.totalRow = Number(data.total);
                 },
                 error: function(e) {
                     console.log("        :",e);
                 }
             })
         }
         //       
         headClass() {
             return 'text-align: center;background:#F7F7F7;color:#1C1C1D;'
         },
         //    
         handleSizeChange(val) {
             this.pageSize = val;
             this.loadItemData();
         },
         //     
         handleCurrentChange(val) {
             this.currentPage = val;
             this.loadItemData();
         }
     }
 });
</script>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기