ratiw / vuetable-2-tutorial

MIT License
258 stars 67 forks source link

Passing action slot from parent to children #32

Closed gabrieloliverio closed 7 years ago

gabrieloliverio commented 7 years ago

Hello! First of all, I'd like to thank and congratulate you for developing such a great component! It's by far the best I tried, among all the similar components listed in Awesome-Vue.

I created a data-table component, which uses vuetable-2, with pagination, pagination info and style settings. Instead of using vuetable-2 inside by components, I use this common component, but I've got to customize the actions slot, with custom buttons and etc.

What I want to to do is passing a named slot actions from a given component listing, for example, to my data-table component which passes to vuetable-2. Is that anyway possible? I'm reading the scoped slots documentation and searched a lot but failed miserably. I'm kind of newbie in Vue.js also, so, I'm sorry if my doubt sound too silly.

I's be something like this, in listing:

       <data-table ref="myTable"
            :api-url="apiUrl"
            :fields="fields"
            :append-params="foo">
            <template slot="actions" scope="props">
                <div class="custom-actions">
                    <button class="btn btn-primary" @click="onAction('edit-item', props.rowData, props.rowIndex)"><span class="glyphicon glyphicon-edit"></span> Edit</button>
                    <button class="btn btn-danger" @click="onAction('delete-item', props.rowData, props.rowIndex)"><span class="glyphicon glyphicon-trash"></span> Delete</button>
                </div>
            </template>
        </data-table>

I don't know what I do in data-table, to pass the slot to vuetable-2.

Thanks you for your attention.