javascript - Vue-tables2 custom dropdown

Question

I would like to change the default select dropdown style in vue-tables2 table. The problem is I'm not able to figure out how I can change the whole template of the dropdown to my custom template. I know how I can add css classes to the default dropdown but my custom dropdown requires to change the entire template.

My custom template is something like this and this should be placed on the 'records limit' dropdown on the table:

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

This is something like dropdown should look like:

Answer 1

of sure u have to hide the default dropdown like that:

.VueTables__limit { display: none; }

and then create your custom dropdown :

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

and then add your reference to the table like that :

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

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

Answer 2

You could use a vue-tables-2 slot to add your custom dropdown, and then use the available methods to trigger events on dropdown's value change.

To hide standard dropdown I think you can use pagination.dropdown: false, but I'm not sure about this.