Search code examples
javascriptvue.jsvue-tables-2

Vue-tables2 custom dropdown

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>

Example

This is something like dropdown should look like:

Should look like

Solution

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