大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

vue如何基于element-ui分页组件封装

这篇文章主要为大家展示了“vue如何基于element-ui分页组件封装”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何基于element-ui分页组件封装”这篇文章吧。

创新互联建站是一家专注于网站设计、网站制作和成都服务器托管的网络公司,有着丰富的建站经验和案例。

具体代码如下所示:



export default {
 components: {
 },
 data() {
  return {
  }
 },
 props: {
  pageSize: {
   type: Number,
   default: 10
  },
  total: {
   type: Number,
   default: 1
  }
 },
 watch: {
 },
 methods: {
  //每页展示条数
  handleSizeChange(val) {
   //事件传递
   this.$emit('handleSizeChangeSub', val);
  },
  //当前页
  handleCurrentChange(val) {
   //事件传递
   this.$emit('handleCurrentChangeSub', val);
  }
 },
 // 过滤器设计目的就是用于简单的文本转换
 filters: {},
 // 若要实现更复杂的数据变换,你应该使用计算属性
 computed: {
 },
 created() {
 },
 mounted() {},
 destroyed() {}
}


调用

// 分页
import pages from 'components/common/pages/pages'
components: {
  pages
 },

handleSizeChangeFun(v) {
  this.pageSize = v;
  this._enterpriseList(); //更新列表
},
handleCurrentChangeFun(v) { //页面点击
   this.pageNum = v; //当前页
   this._enterpriseList(); //更新列表
}

补充:下面看下Element-ui组件--pagination分页

一般写后台系统都会有很多的列表,有列表就相应的要用到分页,根据项目中写的几个分页写一下我对分页的理解,就当是学习笔记了。

这是Element-ui提供的完整的例子


以下是我自己在项目中用到的分页


   
    

以上是“vue如何基于element-ui分页组件封装”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享文章:vue如何基于element-ui分页组件封装
文章起源:http://dzwzjz.com/article/ggjidp.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP