微客导航 » 文章资讯 » vue 基于element-ui 分页组件封装的实例代码

vue 基于element-ui 分页组件封装的实例代码

2023-09-04 11:43:04 312

具体代码如下所示：



exportdefault{
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(){}
}

调用

//分页
importpagesfrom'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分页组件封装的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue 基于element-ui 分页组件封装的实例代码

热门推荐

随机推荐