Vue.js Render functions - Passing scoped slots between render functions

Viewed 55

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 }"> from MyDataTable to tableBody component? (It’s there where I want to use my custom slot)
  • What could be the right approach to test the item.actions column to fire the scopedSlot? I should split the name to extract the header column name actions?

Thank you for your help.

0 Answers
Related