Vue 구성 요소 라 이브 러 리 ElementUI 표 목록 페이지 효과 구현
Element UI 는 Vue 2.0 을 기본 프레임 워 크 로 구현 하 는 구성 요소 라 이브 러 리 로 개발 자,디자이너,제품 매니저 를 위 한 Vue 2.0 기반 구성 요소 라 이브 러 리 로 부대 디자인 자원 을 제공 하여 사이트 의 빠 른 성형 을 도 왔 다.
<!-- -->
<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>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
ElementUI에서 양식 제출 버튼을 비활성화합니다.ElementUI를 사용하여 양식을 작성하고 있습니다. 공식 샘플에서 볼 수 있듯이 submit 버튼을 누를 때 유효성 검사를 발화하는 것은 간단합니다. 다만, 이번은 form를 초기 표시했을 때에 submit 버튼...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.