利用vue和element-ui设置表格内容分页

心已赠人 2022-06-07 13:56 189阅读 0赞

*  html代码
    
    因为我写在template中，也就是新建了组建中，贴出代码。

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

代码中，small代表是否使用小型分页样式  
layout代表组件布局，子组件名用逗号分隔  
属性： total代表总条目数  
事件： current-change用于监听页数改变，而内容也发生改变  
其他属性可参见element官方API

> [http://element.eleme.io/\#/zh-CN/component/pagination][http_element.eleme.io_zh-CN_component_pagination]

*  监听方法,写在methods中

methods:{
        created:function(){ 
            //加载班级的数据
                var url ='http://127.0.0.1:3000/clazz/findAll';
                //向后台获取数据
                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是我获取到后台数据的数组。

[http_element.eleme.io_zh-CN_component_pagination]: http://element.eleme.io/#/zh-CN/component/pagination