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