Vue-tables2 自定义下拉菜单答案

【问题标题】：Vue-tables2 custom dropdownVue-tables2 自定义下拉菜单
【发布时间】：2018-11-30 10:14:42
【问题描述】：

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

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

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

这类似于下拉菜单应该是这样的：

【问题讨论】：

标签： javascript vue.js vue-tables-2

【解决方案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/

【讨论】：

【解决方案2】：

您可以使用vue-tables-2 slot 添加自定义下拉菜单，然后使用available methods 触发下拉菜单值更改的事件。

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

【讨论】：