Buefy 表未在渲染函数中传递道具答案

【问题标题】：Buefy table not passing props in render functionBuefy 表未在渲染函数中传递道具
【发布时间】：2021-09-16 16:45:02
【问题描述】：

我正在尝试在渲染函数中使用Buefy table component，但没有传递道具。

import { createElement as h } from '@vue/composition-api';
import { BTableColumn, BTable } from 'buefy/dist/esm/table';

h(BTable, {
  class: 'table--resource-table table is-fullwidth is-hoverable',
  ref: 'table',
  props: {
    data: filteredList.value,
    backendSorting: true,
    backendPagination: true,
    backendFiltering: true,
    sortIcon: 'angle-up',
    iconPack: 'far',
    defaultSortDirection: 'asc',
    defaultSort: [props.sort, props.dir],
    checkable: props.checkable,
    isRowCheckable: props.isRowCheckable,
    checkedRows: props.selectedRecords,
  },
  scopedSlots: {
    default: (row) => {
      console.log(row);
    }
  }
})

我的console.log 总是返回一个空对象

是不是因为某种原因我将他们的示例错误地翻译成渲染函数？

<b-table :data="myData">
    <b-table-column field="name" label="Name" v-slot="props">
        {{ props.row.name }}
    </b-table-column>
    <b-table-column field="age" label="Age">
        <template v-slot:default="props">
            {{ props.row.age }}
        </template>
    </b-table-column>
</b-table>

【问题讨论】：

标签： vue.js buefy

【解决方案1】：

查看createElement 函数的类型定义后，我发现您可以将function 传递给它：

export type ScopedSlot = (props: any) => ScopedSlotReturnValue;

export type VNodeChildren = VNodeChildrenArrayContents | [ScopedSlot] | string | boolean | null | undefined;


export interface CreateElement {
  (tag?: string | Component<any, any, any, any> | AsyncComponent<any, any, any, any> | (() => Component), children?: VNodeChildren): VNode;
  (tag?: string | Component<any, any, any, any> | AsyncComponent<any, any, any, any> | (() => Component), data?: VNodeData, children?: VNodeChildren): VNode;
}

这可以通过以下方式解决：

h(BTable, {...}, [
  (rowProps) => h('div', {}, context.slots.default(rowProps))
])

【讨论】：