Vue组件库ElementUI实现表格列表分页效果

elementui实现表格列表分页效果教程，供大家参考，具体内容如下

element ui 是一套采用 vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型

<el-pagination>加上@size-change="handlesizechange、@current-change="handlecurrentchange"处理当前页和当前页数的改变事件

<!--表格-->
<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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。