封装elementui Pagination 分页组件

封装elementui 分页组件

Vue.component('mypagination', {
    props: {
        pagesize: {
            type: Number,
            default: 10,//每页展示的条数，根据自己实际，且会带入请求
        },
        pageNum: {
            type: Number,
            default: 1,//第几页数据，根据自己实际，且会带入请求
        },
        pagetotal: {
            type: Number,
            default: 100,//总页数
        },
        currentPage: {
            type: Number,
            default: 1,//指定跳转到多少页
        },
    },
    template: `<el-pagination
  background
  :page-size="pagesize"
  layout="total,prev, pager, next"
  :current-page.sync="currentPages"
  @current-change="current"
   @size-change="sizeChange"
   @prev-click="prev"
   @next-click="next"
  :total="pagetotal">
</el-pagination>`,
    data() {
        return {
            pageData: {
                pageSize: this.pagesize,
                pageNum: this.pageNum,
            },
            currentPages: this.currentPage,
        }
    },
    mounted() {

    },
    methods: {
        //选择每页显示数量
        sizeChange(val) {
            this.pageData.pageSize = val;
            this.$emit("pagefunc", this.pageData);
        },
        //选择某一页
        current() {
            this.pageData.pageNum = this.currentPages;
            this.$emit("pagefunc", this.pageData);
        },
        //上一页
        prev() {
            this.pageData.pageNum = this.pageData.pageNum - 1;
            this.$emit("pagefunc", this.pageData);
        },
        //下一页
        next() {
            this.pageData.pageNum = this.pageData.pageNum + 1;
            this.$emit("pagefunc", this.pageData);
        },
    }
})