element ui+vue实现分页组件传值

最新推荐文章于 2024-04-21 06:15:49 发布

置顶

qq_40055200

最新推荐文章于 2024-04-21 06:15:49 发布

阅读量2.6k

点赞数 1

文章标签： 1 2

本文链接：https://blog.csdn.net/qq_40055200/article/details/101270166

版权

本文介绍了如何在Vue项目中结合Element UI库，通过props实现从父组件向分页公用组件传值，并详细展示了数据定义、方法设置、父组件引用以及分页样式的配置过程。

摘要由CSDN通过智能技术生成

props：父传子

分页公用组件：

element ui样式：

传值组件：props父传子

data定义变量：

方法：

<template>
    <section>
        <div class="pagination">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-size="page.pageSize"
                :page-sizes="[5, 10, 20, 40]"
                :total="page.pageTotal"
                layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>
    </section>
</template>
<script>
    /**
     * 分页共通组件
     */
    export default {
        name: 'ThePagination',
        props: {
            /**
             * 定义 ThePagination组件特有的属性
             */
            attribute: {
                handleChange() {
                }
            }
        },
        data() {
            return {
                page: {
                    // 当前页数
                    currentPage: 1,
                    // 每页默认显示条数
                    pageSize: 10,
                    // 总条数
                    pageTotal: 0,
                },
            }
        },
        methods: {
            /**
             * 选择每页多个条事件
             *
             * @param pageSize
             */
            handleSizeChange(pageSize) {

                this.page.pageSize = pageSize;
                this.attribute.handleChange({currentPage: 1, pageSize: this.page.pageSize});
            },

            /**
             * 点击页码事件
             *
             * @param currentPage
             */
            handleCurrentChange(currentPage) {

                this.page.currentPage = currentPage;
                this.attribute.handleChange({currentPage: this.page.currentPage, pageSize: this.page.pageSize});
            },
        }
    }
</script>
<style scoped>