Vue-tables2 自定义下拉列表

Question

我想更改 vue-tables2 table 中默认的 select 下拉样式。问题是我无法弄清楚如何将下拉列表的整个模板更改为我的自定义模板。我知道如何将 css 类添加到默认下拉列表，但我的自定义下拉列表需要更改整个模板。

我的自定义模板是这样的，它应该放在 table 的 'records limit' 下拉菜单中：

<div class="some_customclass">
  <span class="second_customclass">{{text}}</span>
  <select class="third_customclass">
    <option>
     {{ option.text }}
    </option>
  </select>
</div>

下拉菜单应该如下所示：

Answer 1

当然你必须像那样隐藏默认下拉菜单：

.VueTables__limit { display: none; }

然后创建您的自定义下拉菜单：

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

然后像这样添加对 table 的引用：

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

JSfiddle : https://jsfiddle.net/jfa5t4sm/2601/

Answer 2

您可以使用 vue-tables-2 slot to add your custom dropdown, and then use the available methods 在下拉菜单的值更改时触发事件。

要隐藏标准下拉菜单，我想你可以使用 pagination.dropdown: false，但我不确定。

Vue-tables2 自定义下拉列表

Vue-tables2 custom dropdown

javascript

vue.js

vue-tables-2