I've coded a simple DataTable component using render function that uses other components to build a header table and body table. I would use a slot to custom HTML code of one column in the body table
That's my code
<MyDataTable
class="table table-bordered"
headers="headers"
:preHeader="preHeader"
:items="items"
>
<template v-slot:item.actions="{ item }">
<span>Hello {{ item.text }}</span>
</template>
</MyDataTable>
MyDataTable component
export default {
name: "MyDataTable",
props: {
headers: Array,
items: Array,
preHeader: Array,
},
render(h, context) {
const table = h("table", [
h(tableHeader, {attrs: { headers: this.headers, preHeader: this.preHeader },}),
h(tableBody, { attrs: { headers: this.headers, items: this.items } }),])
return table
},
}
That's the tableBody component where I want to use the scopedSlot:
const tableBody = {
name: "TableBody",
props: {
headers: Array,
items: Array,
},
render(h) {
return h("tbody", [ ...this.items.map(item => {
return h("tr", [ ...this.headers.map(header => {
// If scopedSlot `item[header.value]` is present
// I want to use it instead of the following ling
return h("td", item[header.value])
})])
})])
},
}
I’ve two questions:
- How I can pass the
scopedSlot <template v-slot:item.actions="{ item }">fromMyDataTableto tableBody component? (It’s there where I want to use my custom slot) - What could be the right approach to test the
item.actionscolumn to fire the scopedSlot? I should split the name to extract the header column name actions?
Thank you for your help.