vue低版本（2.6）动态渲染

需求

表格头部字段可以动态渲染

问题 简单的字段渲染没问题，需要自定义的时候出现问题

渲染组件(优化后)

  <!-- 表格 el-table  -->
    <section class="page-table">
      <el-empty v-if="showEmpty" :style="{ height: tableHeight + 'px' }" description="暂无数据" />
      <el-table v-else v-loading="loading" :height="tableHeight" ref="tableRef" :data="tableData" row-key="id">
        <template v-for="item in columns">
          <el-table-column align="center" v-bind="columnOptions(item)" v-if="item.visible">
            <template #default="scope">
              <!-- 动态插槽 -->
              <template v-if="item.useSlot">
                <slot :name="item.prop" :row="scope.row"></slot>
              </template>
              <!-- 使用自定义render渲染 -->
              <template v-else-if="item.component">
                <component :is="item.component" :row="scope.row" :prop="item.prop" />
              </template>
              <template v-else>
                <!-- 直接渲染文本 -->
                {{ scope.row[item.prop] }}
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </section>

遇到的问题以及解决

1.想使用vue3的 h 函数,发现 Vue.h为undefined

2.改用vue的this.$createElement

...
  data() {
    return {
    columns: [
      {
        label: this.$t('sku编号'),
        prop: 'skuNo',
        width: 110,
        fixed: 'left',
        render({row}){
          return this.$createElement('div', {}, row.skuNo)
        }
      },
    ]
    }
  }
...

代码报错

解决方法

使用动态组件

  <component :is="item.component" :row="scope.row" :prop="item.prop" />

外部使用

 data() {
    return {
      columns: [
           label: this.$t('sku编号'),
          prop: 'skuNo',
          width: 110,
          fixed: 'left',
          // useSlot: true,
          component: {
            functional: true,
            props: ['row', 'prop'],
            render: (h, ctx) => {
              return h(
                'div',
                {
                  style: {
                    cursor: 'pointer',
                    color: '#1890ff',
                  },
                },
                ctx.props.row[ctx.props.prop],
              )
            },
          },
      ],
   
  },

解决