Vue-material: md-table-pagination 和 md-size - 如何使用

创建于 2017-01-04  ·  3评论  ·  资料来源: vuematerial/vue-material

你好。 在我看来,md-table-pagination 的 md-size prop 不会影响 md-table 中的行数。

即:我有 20 行要显示在 md-table 中

data() {
    return {
      rows: [
        {id: 1, name: "Record #1 name", isEnabled: true},
        {id: 2, name: "Record #2 name", isEnabled: false},
        // ...
        {id: 20, name: "Record #20 name", isEnabled: true},
      ]
    }
}

然后我像这样创建 md-table:

<md-table-card>
    <md-toolbar>
        <h2 class="md-title">Records list</h2>
        <md-button class="md-icon-button">
            <md-icon>add_circle_outline</md-icon>
        </md-button>
        <md-button class="md-icon-button">
            <md-icon>edit_circle_outline</md-icon>
        </md-button>
        <md-button class="md-icon-button">
            <md-icon>delete</md-icon>
        </md-button>
    </md-toolbar>

    <md-table md-sort="id" md-sort-type="desc" @sort="onSort">
        <md-table-header>
            <md-table-row>
                <md-table-head md-sort-by="id"><md-icon>format_list_numbered</md-icon><span>ID</span></md-table-head>
                <md-table-head md-sort-by="name">Record name</md-table-head>
                <md-table-head md-sort-by="isEnabled">Is Enabled</md-table-head>
            </md-table-row>
        </md-table-header>

        <md-table-body>
            <md-table-row v-for="(row, rowIndex) in rows" :key="rowIndex" :md-item="row">
                <md-table-cell md-numeric>{{row.id}}</md-table-cell>
                <md-table-cell>{{row.name}}</md-table-cell>
                <md-table-cell><md-switch v-model="row.isEnabled"></md-switch></md-table-cell>
            </md-table-row>
        </md-table-body>
    </md-table>

    <md-table-pagination
        :md-size="5"
        :md-total="rows.length"
        md-page="1"
        :md-page-options="[5, 10, 25, 50]"
        @pagination="onPagination">
    </md-table-pagination>

</md-table-card>

但是表中的行数等于 data() 中的所有行。
如果我更改寻呼机中的“大小”,它不会影响显示的行数。

question

所有3条评论

应该手动完成。 md-table 仅在用户与表本身交互时触发事件。

为什么? 因为我不能威胁你的数据。 您的数据可能有很多不同的格式。 因此,您应该创建(可能在您的后端)一个分页逻辑,以使用新页面设置(在您的情况下为rows变量)更新v-for rows变量。

谢谢你。

关键是,我认为,如果我的数据中有 6 行,并且大小设置为 5,我不应该看到 6 页数据,我应该看到 2。你知道总数,你知道大小,所以做分区。

@jdrake3您可以使用简单的 if 更改分页大小

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

bjarnik picture bjarnik  ·  3评论

tridcatij picture tridcatij  ·  3评论

andreujuanc picture andreujuanc  ·  3评论

capttrousers picture capttrousers  ·  3评论

xinzhanguo picture xinzhanguo  ·  3评论