vue 基于element-ui 分页组件封装的实例代码
程序员文章站
2022-12-14 14:55:26
具体代码如下所示：
具体代码如下所示：
<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(); //更新列表
}
补充：下面看下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 分页组件封装的实例代码，希望对大家有所帮助