vue element-ui 分頁組件封裝

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