Question

我正在使用Vue-table2渲染表格。 https://github.com/ratiw/vuetable-2

do{
    $k=mt_rand(10000,99999);
    $i++;
}while($i<=4);

“我的服务器Api响应”中没有任何分页响应。服务器返回的数据是

 <vuetable ref="vuetable"
                    :api-url= "apiurl"
                    :fields="fields">
                  </vuetable>

这是我第一次使用Vue-js。我如何在其中添加分页并仍然使用vue-table2。提前谢谢。

Answer 1

由于您没有分页值，因此必须将其插入，这样我们就可以欺骗vue表

<template>
    <div>
        <vuetable ref="vuetable" api-url="/api/ahmed" :fields="fields" pagination-path="" @vuetable:pagination-data="onPaginationData" @vuetable:load-success="loadSuccess">
        </vuetable>
        <vuetable-pagination ref="pagination" @vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
    </div>
</template>

<script>
    import Vuetable from 'vuetable-2/src/components/Vuetable'
    import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
    export default {
        components: {
            Vuetable,
            VuetablePagination,
        },
        data() {
            return {
                fields: ['name', 'email', 'birthdate', 'nickname', 'gender', '__slot:actions'],
                allData: false,
                currentPage: 1,
            }
        },
        mounted() {

        },
        methods: {
            onPaginationData(paginationData) {

                this.$refs.pagination.setPaginationData(paginationData)
            },
            loadSuccess(data) {

                this.$refs.vuetable.$nextTick(()=>{
                    if (!this.allData) {

                        this.allData = data;
                    }
                    if (!data.data.per_page) {
                        data = this.setData(this.currentPage);
                        this.$refs.vuetable.loadSuccess(data);
                    }
                })



            },
            setData(Page) {

                var data = JSON.parse(JSON.stringify(this.allData));
                var total = data.data.data.length;
                var perPage = 10;
                var currentPage = Page;
                var lastPage = parseInt(total / perPage) + ((total % perPage) === 0 ? 0 : 1)
                var from = parseInt((currentPage - 1) * perPage) + 1;
                var to = from + perPage - 1;

                to = to > total ? total : to;
                console.log(from,to)
                var newData = this.allData.data.data.filter(function(element, index) {

                    if (index >= from-1 && index <= to-1) {
                        console.log(index,from,to)
                        return true;
                    }

                    return false;
                })
                // console.log(newData)
                // return newData;

                data.data = {
                    "total": total,
                    "per_page": perPage,
                    "current_page": currentPage,
                    "last_page": lastPage,
                    "next_page_url": "",
                    "prev_page_url": null,
                    "from": from,
                    "to": to,
                    data: newData

                }
                // console.log(data)
                this.currentPage = Page;
                this.$refs.vuetable.loadSuccess(data);
                return data;
            },
            onChangePage(page) {


                this.setData(page);
            }
        }
    }
</script>

如何使用vue-table2创建分页？

1 个答案: