vue 基于element-ui 分页组件封装的实例代码
编程学习 2021-07-04 16:47www.dzhlxh.cn编程入门
这篇文章主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
具体代码如下所示：
<template>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" style="float:right;">
</el-pagination>
</template>
<script type="text/ecmascript-6">
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() {}
}
</script>
<style lang="scss" type="text/css" scoped>
</style>
调用
// 分页
import pages from 'components/common/pages/pages'
components: {
pages
},
<pages :total="total" :page-size="pageSize" @handleSizeChangeSub="handleSizeChangeFun" @handleCurrentChangeSub="handleCurrentChangeFun"></pages>
handleSizeChangeFun(v) {
this.pageSize = v;
this._enterpriseList(); //更新列表
},
handleCurrentChangeFun(v) { //页面点击
this.pageNum = v; //当前页
this._enterpriseList(); //更新列表
}
补充：狼蚁网站SEO优化看下Element-ui组件--pagination分页
一般写后台系统都会有很多的列表，有列表就相应的要用到分页，根据项目中写的几个分页写一下我对分页的理解，就当是学习笔记了。
这是Element-ui提供的完整的例子
<template> <div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"//这事下拉框可以选择的，选择一夜显示几条数据
:page-size="100" //这是当前煤业显示的条数
layout="total, sizes, prev, pager, next, jumper"
:total="400" //这个是总共有多少条数据，把后台获取到的数据总数复制给total就可以了
>
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
total:'0',
currentPage: 4
};
}
}
</script>
以下是我自己在项目中用到的分页
<div style="float:right;margin-top:20px;"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize" //写代码时忘记把pageSize赋值给:page-size了， layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> </div>
总结
以上所述是长沙网络推广给大家介绍的vue 基于element-ui 分页组件封装的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！