README

此软件包为您提供了一个分形序列化器，使其更容易处理 vuetable 分页。

关于 VueTableSerializer

如果您查看 vuetable 分页 的源代码，您可以看到它期望工作的情况。

{
    "last_page": 10,
    "current_page": 1,
    "total": 100,
    "from": 1,
    "to": 10
}

这很烦人，因为默认情况下，当您返回分形分页集合时，它默认不返回相同的分页键。它更像是这样的

{
    "total": 10,
    "count": 100,
    "per_page": 10,
    "current_page": 2,
    "total_pages": 10,
    "links": {
        "next": "my-app.dev/books?page=2",
        "pref": "my-app.dev/books?page=1"
    }
}

因此，我提出了这个序列化器，它使与 vuetable 的默认设置协作变得更容易。我将向您展示如何做。

安装

您可以通过 composer 安装此软件包

composer require depsimon/fractal-vuetable-serializer

用法

在您的后端代码中使用 VueTableSerializer。

use DepSimon\FractalVueTableSerializer\VueTableSerializer;
$manager->setSerializer(new VueTableSerializer());

如果您正在使用 Laravel，我建议您使用 laravel-fractal 软件包，该软件包可以使使用 fractal 变得非常容易。在这种情况下，您可以使用它如下

$paginator = Book::paginate(5);
$books = $paginator->getCollection();

fractal()
    ->collection($books, new TestTransformer())
    ->serializeWith(new \DepSimon\FractalVueTableSerializer\VueTableSerializer())
    ->paginateWith(new IlluminatePaginatorAdapter($paginator))
    ->toArray();

以下是一个利用此序列化器的 VueJS 组件示例。

<template>
    <div>
        <vuetable
            ref="vuetable"
            api-url="http://my-app.dev/books"
            :fields="fields"
            :pagination-path="paginationPath"
            :pagination-component="paginationComponent"
            @vuetable:pagination-data="onPaginationData"
            @vuetable:load-success="onLoadSuccess"></vuetable>
        <vuetable-pagination-info
            ref="paginationInfo"></vuetable-pagination-info>
        <component
            ref="pagination"
            :is="paginationComponent"
            @vuetable-pagination:change-page="onChangePage"></component>
    </div>
</template>
<script>
    export default {
        data: function data() {
            return {
                fields: [
                    {
                        name: 'title',
                        title: 'Title'
                    },
                    {
                        name: 'author',
                        title: 'Author'
                    }
                ],
                paginationPath: 'meta.pagination',
                paginationComponent: 'vuetable-pagination'
            }
        },


        methods: {
            onLoadSuccess: function (response) {
                this.$refs.paginationInfo.setPaginationData(response.data);
            },
            onChangePage: function (page) {
                this.$refs.vuetable.changePage(page);
            },
            onPaginationData: function (tablePagination) {
                this.$refs.paginationInfo.setPaginationData(tablePagination);
                this.$refs.pagination.setPaginationData(tablePagination);
            }
        }
    }
</script>