Buefy表格在render函数中props无法正常传递如何解决？

问题原因 #

写法转换的核心错误是对Buefy Table的插槽层级理解有误：

• BTable 本身的默认插槽仅用于放置 BTableColumn 子组件，不直接传递行数据
• 行级作用域插槽是绑定在单个 BTableColumn 组件上的，而非 BTable 根组件

修复方案 #

调整组件嵌套结构，将 BTableColumn 作为 BTable 的子节点传入，将行作用域插槽挂载到对应的 BTableColumn 上即可，修复后的代码如下：

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,
  }
}, [
  // 渲染姓名列
  h(BTableColumn, {
    props: {
      field: 'name',
      label: '姓名'
    },
    scopedSlots: {
      default: (scope) => {
        console.log(scope.row) // 可正确拿到当前行数据
        return scope.row.name
      }
    }
  }),
  // 渲染年龄列
  h(BTableColumn, {
    props: {
      field: 'age',
      label: '年龄'
    },
    scopedSlots: {
      default: (scope) => scope.row.age
    }
  })
])

注意事项 #

• Vue 2 版本的render函数第三个参数为子节点数组，所有列组件都需要放在该数组中传递给BTable
• BTableColumn的作用域插槽需要返回单元格要渲染的内容，不可省略返回值
• 如果需要自定义整行渲染，可使用BTable的row插槽，插槽参数为scope，行数据存于scope.row中

内容的提问来源于stack exchange，提问作者Bruno Francisco