frontend-feedingship-vue2/src/components/pagination/pagination.vue

    <template>
    <div>
        <div class="pagination">
            <!-- 
                @size-change:每页多少条，pageSize 改变时会触发
                @current-change：当前页，currentPage 改变时会触发
                :current-page：默认选中哪一页
                :page-sizes：定义每页多少条列表
                :page-size:默认定义每页多少条
                :total：一共多少条数据
                layout="显示分页的插件"
                    total：总条数插件
                    sizes：每页多少条插件
                    prev/next：上一页/下一页插件
                    pager：页码插件
                    jumper：前往那一页插件
                -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="obj.currentPage" :page-sizes="[10, 20, 50, 100,200]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            total: {
                type: Number
            }
        },
        data() {
            return {
                obj: {
                    currentPage: 1,
                },
            }
        },
        methods: {

            handleSizeChange(val) {
                // 发送数据
                this.$emit("handleSize", val)
            },
            // 当前页
            handleCurrentChange(val) {
                // 发送数据
                this.$emit("handleCurrent", val)
            }
            // 分页结束
        }
    }
</script>