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'
                    }
                }

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

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

唯一的一点是，当我在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;
}

这将使默认选择器消失

你的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/

Answer 2

这不是问题的答案，但是如果有人最终想知道如何通过选项完全关闭“ Records：”下拉列表，则可以这样做...

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

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

2 个答案: