vue怎么动态渲染虚拟DOM

Question

在使用Element UI时碰到一个问题，想要根据el-table自定义一个组件，但是发现没法去动态的渲染el-tabel-col的内容。
这是官方的使用方法，用slot来自定义内容

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

我现在想定制的是通过自定义cols内容来动态渲染el-table-column，下面是我的代码

<el-table :data="data.list">
      <el-table-column v-for="col in cols"
                       :key="col.prop"
                       :prop="col.prop"
                       :label="col.label">
      <!-- 此处如何用js代替slot -->
      </el-table-column>
    </el-table>

cols: [
      {prop: 'dayTime', label: '日期'},
      {prop: 'name', label: '姓名'},
      {prop: 'op', label: '操作',renderCell(){    //比如这里写JSX，怎么才能把动态生成的虚拟DOM渲染在el-table-column内呢
          return (
               <el-button>编辑</el-button>
               <el-button>删除</el-button>
          )
      }},
      {prop: 'html', label: 'html',renderCell(){    //返回html内容配合v-html可以实现效果但是不能使用vue组件
          return '<button>编辑</button>'
      }},
  ]

想问下有什么办法能实现以上的功能吗？

Answer 1

functional组件，render函数了解一下

Answer 2

你的组件直接用jsx来写

Answer 3

可能你要写一个代理的组件，接受你的renderCell方法，在render的时候返回renderCell的执行结果。（猜的）

{
    props: ['renderCell'],
    render() {
        return this.renderCell()
    }
}