Vue Tables 2 - perPageValues 选项无法正常工作

Question

我正在使用 Vue Js v.2.4.4 并尝试配置 vue-tables-2 插件。

我有一个行列表，我试图用 perPageValues 选项限制它们，这是我的选项：

options: {
                    filterByColumn: false,
                    filterable:['nickname','email','reg_date','year'],
                    perPage:100,
                    perPageValues: [10,25,50,100,500,1000],
                    texts: {
                        filter: "Search:",
                        filterBy: 'Search by {column}',
                        count: ''
                    },
                    dateColumns: ['reg_date'],
                    dateFormat: 'DD-MM-YYYY',
                    datepickerOptions: {
                        showDropdowns: true,
                        autoUpdateInput: true,
                    },
                    pagination: { chunk:10, dropdown: false },
                    headings: {
                        id: 'ID',
                        reg_date: 'Registered',
                        nickname: 'Nickname',
                        email: 'Email',
                        year: 'Registration date',
                        number: 'Number'
                    }
                }

一切正常，但限制值列表仅显示前两个元素：

控制台中未提供任何错误，通过此组合框的 table 过滤工作正常，没有任何可能的问题。

唯一的问题是，当我像这样在 perPageValues 选项中使用小值时：

perPageValues: [1,3,6,7,9,11,13],

已显示完整的值列表，一切正常：

我观察了一下，发现20之后的每一个数字都不显示（时不时）。

能否请您提供一些建议，以了解哪些事情会引发此问题？

是否可以在不修复插件源的情况下修复此问题e.t.c。？

p.s。我在测试模式下使用这个没有任何其他设置或组件的 vue 组件，所以没有插件版本不兼容 e.t.c。谢谢！

Answer 1

发生这种情况可能是因为您没有那么多记录

你可以试试这个

在你的 css:

.VueTables__limit {
display: none;
}

这将使默认值select或消失

在你的 vue 模板中添加一个新的 select:

<select @change="$refs.table.setLimit($event.target.value)">
                        <option value="10">5</option>
                        <option value="10">10</option>
                        <option value="20">20</option>
</select>

在您正在生成的table中添加引用

 <v-client-table ref="table"  :options="yourOptions" :data="yourData"  :columns="yourColumns" ></v-client-table>

JSfiddle： https://jsfiddle.net/jfa5t4sm/1868/

Answer 2

这不是问题的答案，但如果有人想知道如何通过选项完全关闭 "Records:" 下拉菜单，您可以这样做...

options: {
    perPage: 5,
    perPageValues: [], 
}

Vue Tables 2 - perPageValues 选项无法正常工作

Vue Tables 2 - perPageValues option not working correctly

vuejs2

vue-tables-2