vue2的分页组件

 

组件代码：

<template>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage"
        :page-sizes="pagenum || [10, 20, 30, 50, 100, 150, 200]" :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px">
    </el-pagination>
</template>

<script>
export default {
    props: {
        pagenum: {},
        total: {
            type: Number || String
        },
        page: {
            type: [Number, String],
        },
        limit: {
            type: [Number, String],
        },
    },
    data() {
        return {
            searchObj: {
                currentPage: 1,
                pageSize: 10
            },
        }
    },
    computed: {
        currentPage: {
            get() {
                return parseInt(this.page)
            },
            set(val) {
                this.$emit('update:searchObj.page', val)
            },
        },
        pageSize: {
            get() {
                return parseInt(this.limit)
            },
            set(val) {
                this.$emit('update:searchObj.limit', val)
            },
        },
    },
    methods: {
        handleSizeChange(val) {
            // console.log(val, 'a')
            this.searchObj.pageSize = val
            this.$emit('SizeChange', this.searchObj.pageSize)
            // this.query()
        },
        handleCurrentChange(val) {
            // console.log(val, 'b')
            this.searchObj.currentPage = val
            this.$emit('CurrentChange', this.searchObj.currentPage)
            // this.query()
        },
    }
}
</script>

<style lang="less" scoped>
.el-pagination {
    text-align: right;
}
</style>

项目中使用：

<template>
    <div>

        <Pagination :total="total" @SizeChange="SizeChange" @CurrentChange="CurrentChange" :page.sync="searchObj.page"
            :limit.sync="searchObj.limit" />
    </div>
</template>

<script>
import Pagination from "../../../components/pagination.vue"
export default {
    components: { Pagination},
  
    data() {
        return {
           
            searchObj: {
                page: 1,
                limit: 10
            },
            total: 0,
           
        }
    },
    methods: {
      
        SizeChange(e) {
            this.searchObj.limit = e
            this.query()
        },
        CurrentChange(e) {
            this.searchObj.page = e
            this.query()
        },

         query() {
          
        },
    }
}
</script>