欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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(); //更新列表
}