Question

我已经使用渲染函数编码了一个简单的DataTable组件，该函数使用其他组件来构建头表和主体表。我会使用插槽自定义正文表中一列的HTML代码

那是我的代码

<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组件

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
  },
}

那是我要使用scopedSlot的tableBody组件：

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])
      })])
    })])
  },
}

我有两个问题：

如何将scopedSlot <template v-slot:item.actions="{ item }">中的MyDataTable传递给 tableBody 组件？（我想在其中使用自定义插槽）
测试item.actions列以触发scopedSlot的正确方法是什么？我应该拆分名称以提取标题列名称操作吗？

谢谢您的帮助。

Vue.js渲染功能-在渲染功能之间传递作用域插槽

0 个答案: