Vue-Tables2自定义下拉菜单

Question

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

我的自定义模板是这样的，应该放在表格的“记录限制”下拉列表中：

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

，然后将您的引用添加到该表中：

<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添加自定义下拉菜单，然后使用available methods触发下拉菜单的值更改事件。

要隐藏标准下拉菜单，我认为您可以使用pagination.dropdown: false，但是对此我不确定。