如何使用分页打印 vuetify 数据表答案

【问题标题】：How to print vuetify Data table with pagination如何使用分页打印 vuetify 数据表
【发布时间】：2019-08-30 12:05:32
【问题描述】：

我将 Laravel 与 Vuetify 2 一起使用。我想打印表格中的所有数据而不进行分页。这是我得到的。

v-dialog   v-model="salesDialog">
        <v-card id="print">
            <v-card-text>
                <v-data-table
                    :headers="salesListItemHeaders"
                    :items="salesItemData"
                    :search="search" hide-default-footer
                    :disable-pagination="true"
                >
                </v-data-table>
            </v-card-text>
        </v-card>

    </v-dialog>

我的风格

@media print {
    body * {
        visibility: hidden;
        font-size: 20px !important;
    }

    #print, #print * {
        visibility: visible;
        border-bottom: none;
    }

    #title {
        visibility: hidden;
    }

    #print {
        padding: 20px;
        position: fixed;
        height: 100%;
        left: 0;
        top: 0;
    }
}

我正在查看 v-dialog 中的可打印项目

【问题讨论】：

您是否有可能已经在 laravel 中以某种方式对数据进行了分页？
不，先生。我得到了视图中的所有项目，但是在打印时显示的项目更少。

标签： laravel vue.js vuetify.js

【解决方案1】：

实现这一点需要两个道具，

disable-pagination
hide-default-footer

用于从 vuetify 表中删除分页，

所以最终的代码应该是这样的

<v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
      disable-pagination
      hide-default-footer

></v-data-table>

【讨论】：

谢谢您，先生。但我只得到第一页。
我认为它应该显示所有项目，您总共有多少项目？
视情况而定。假设我有 50 件物品，但在印刷品中，我得到了 20 件物品。我在对话框中显示可打印项目。我更新了问题。
您也可以发布更新的屏幕截图吗？现在这可能是对话框高度问题。
实际上错误在于样式定位。如果我将元素位置设置为固定页面将不会显示