vue element-ui 分页组件封装
程序员文章站
2022-03-09 22:39:33
调用 // 分页import pages from 'components/common/pages/pages' components: { pages },
<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(); //更新列表
}