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来写