0

目前我正在使用 Element-UI 在我的应用程序中进行快速开发，并且我想将分页创建为子组件，因此我可以在任何父组件中重复使用它并减小我的应用程序的大小。

具有“内联”分页的父组件的示例。

父.vue

<template>
    <ol>
        <li v-for="student in studentList>{{ student.full_name }}</li>
    </ol>
    <el-pagination
        layout="sizes, prev, pager, next"
        :total="totalPages"
        :page-size="pageSize"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
</template>
<script>
    export default {
        data () {
            return {
                pageSize: 10,
                currentPage: 1,
                students: [] // this filled from backend when component created
            }
        },
        created () {
            // Axios HTTP request to fetch data from server
            // to filled students variable
        },
        computed: {
            totalPages () {
                return this.students.length
            },
            studentList () {
                return this.students.slice(((this.currentPage - 1) * this.pageSize), (this.pageSize * this.currentPage))
            }
        },
        methods: {
            handleSizeChange (size) {
                this.pageSize = size
            },
            handleCurrentChange (value) {
                this.currentPage = value
            }
        }
    }
</script>

它工作得很好，但它可能会很痛苦，因为我应该在任何想要使用分页的组件中重复所有这些内容。任何人都可以给我举例说明如何在集合仍保留在父组件上时将此分页创建为子组件。

我已经尝试创建它，但坚持如何将返回值从计算属性传递到父组件。

例如，我失败的尝试创建子组件

孩子.vue

... // all of template element and functions
computed: {
    studentList () {}
},
methods: {
    updateStudentList () {
        this.$emit('changed-value', this.studentList) // as you can see, studentList is computed function like parent code above
    }
}

父.vue

// there's no more studentList function on computed property in parent component
// instead, it moved on child component
<li v-for="student in students">{{ student.full_name }}</li>
<child-pagination v-on:changed-value="rebuildStudent"></child-pagination>
...
methods: {
    rebuildStudent (newCollection) {
       this.students = newCollection
    }   
}
4

1 回答 1

0

更新

经过一番修补，我终于可以解决它了。

计算数组应该保留在父组件上，并在集合数组上添加一个存储begin和索引切片的对象。end该对象将根据使用方法的子事件进行更改。

父.vue

<template>
    <pagination v-model="pageIndex"
        v-on:paginationInit="paginationInit"
        collections="students">
    </pagination>
</template>

data () {
    return {
        students: [] // collection
        pageIndex: {}
    }
},
computed: {
    studentList () {
        return this.students.slice(pageIndex.begin, pageIndex.end)
    }
},
methods: {
    // This method emitted from child component
    paginationInit (pageIndex) {
        this.pageIndex.begin = pageIndex.begin
        this.pageIndex.end = pageIndex.end
    }
}

然后在子组件中，计算逻辑移到此处的方法上，该方法处理来自单击的分页元素的事件。

孩子.vue

data () {
    return {
        pageIndex: { begin: 0, end: 10 }
    }
},
created () {
    this.init()
},
methods: {
    init () {
        this.$emit('paginationInit', this.pageIndex)
    },
    handleCurrentChange (page) {
        this.pageIndex.begin = (page - 1) * this.pageSize
        this.pageIndex.end = this.pageSize * page
        this.$emit('input', this.pageIndex)
    }
}
于 2018-03-13T12:30:46.663 回答