Rumah > hujung hadapan web > tutorial js > 利用vue和element-ui如何实现表格内容分页

利用vue和element-ui如何实现表格内容分页

亚连
Lepaskan: 2018-06-02 09:36:00
asal
3702 orang telah melayarinya

下面我就为大家分享一篇利用vue和element-ui设置表格内容分页的实例,具有很好的参考价值,希望对大家有所帮助。

html代码

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

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

代码中,small代表是否使用小型分页样式

layout代表组件布局,子组件名用逗号分隔

属性: total代表总条目数

事件: current-change用于监听页数改变,而内容也发生改变

其他属性可参见element官方API

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

监听方法,写在methods中

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;
  }
}
Salin selepas log masuk

其中url是在后台express搭建起来的脚手架所设置好的路由。

在data中注册使用的数据

因为我是全局注册,data是个返回对象的函数

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

将数据绑定到tbody上

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

其中searchInfo是我获取到后台数据的数组。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

有关处理axios拦截设置和错误处理的方法?

通过vue.js使用axios实现下载功能(详细教程)

完美解决axios在ie下的兼容性问题,具体解决步骤如下

Atas ialah kandungan terperinci 利用vue和element-ui如何实现表格内容分页. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan