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

时间:2019-08-30 12:05:32

标签: laravel vue.js vuetify.js

我将Laravel与Vuetify 2配合使用。我想不分页地打印表中的所有数据。 这是我得到的。 enter image description here

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对话框查看可打印项目

1 个答案:

答案 0 :(得分:0)

要实现这一目标,需要两个道具

disable-pagination
hide-default-footer

用于从vuetify表中删除分页,

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

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

></v-data-table>