情景

使用vue 封装一个table组件。希望参考antd-design-vue 的表格一样，传入customCell / customHeaderCell: () => VNode 自定义表头。

使用插槽的话，会影响所有表头。修改某个表头的话，需要在插槽中判断。

使用 vNode的话，可以只修改需要改变的表头。

代码（vue3）

使用vue 的component 组件发现可接收VNode

/**表格代码*/
<template>
  // ... v-for col in columns 配置
  <component :is="col.customHeaderCell(col)" v-if="col.customHeaderCell" />
  <template v-else>
    <slot name="table-header" :column="col">
      <span class="table-header-title">{{ col.title }}</span>
    </slot>
  </template>
  // ...
</template>

import { h } from 'vue';
col.customHeaderCell(column){
  return h('span', column.title + 'render'); // 这里就可返回jsx
}
// 可以返回一个.vue 组件
col.customHeaderCell(column){
  return defineComponent({...})
}

代码（vue2）

vue2的component is接收VueComponent，也类似一个.vue组件，因此，需要通过optionalApi，配合render函数，创建一个VueComponent对象

col.customHeaderCell(column){
  return {
    // 这里可以写vue的optional API (methods)
    render(h){
      return h('span', column.title + 'render'); 
      // 这里也可返回jsx，但是render的形参'h'不能去除
      return <span>{column.title + 'render'}</span>
    }
  }

}