0

我正在使用 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'
                    }
                }

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

在此处输入图像描述

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

唯一的事情是，当我在 perPageValues 选项中使用一个小值时，如下所示：

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

显示了完整的值列表，并且一切正常： 在此处输入图像描述

我进行了观察，发现 20 之后的每个数字都没有显示（有时）。

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

是否可以在不修复插件源等的情况下解决此问题？

ps 我正在使用这个 vue 组件，没有任何其他设置或组件，在测试模式下，所以没有插件版本不兼容等谢谢！

4

2 回答 2

2

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

你可以试试这个

在你的 CSS 中：

.VueTables__limit {
display: none;
}

这将使默认选择器消失

在您的 Vue 模板中添加一个新选择：

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

在您生成的表中添加参考

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

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

于 2018-04-11T19:32:05.413 回答
1

这不是问题的答案，但如果有人最终在这里想知道如何通过选项完全关闭“记录：”下拉菜单，您可以这样做......

options: {
    perPage: 5,
    perPageValues: [], 
}
于 2020-02-25T07:30:40.203 回答