vue3和element表格列的如何使用render函数进行组件传参，给出示例

在 Vue3 中，Element UI 表格的 `el-table-column` 的 `render` 函数允许你在每个单元格渲染自定义组件，并通过 `props` 属性传递数据。下面是一个简单的示例：

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    />
    <el-table-column
      prop="customColumn"
      label="定制列"
      render="customRender"
    >
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', customColumn: { content: '这是内容', extraProp: 'extraValue' } },
        { name: '李四', customColumn: { content: '这是另一个内容', extraProp: 'anotherExtraValue' } }
      ],
      // 这里定义你的 render 函数
      customRender(h, { row }) {
        const Component = () => {
          // 使用 h 作为模板引擎创建组件
          return h('div', {
            props: {
              content: row.customColumn.content,
              // 你可以传递额外的数据到组件
              extraProp: row.customColumn.extraProp,
            },
          }, row.customColumn.content);
        };

        // 返回你需要渲染的组件实例
        return Component;
      },
    };
  },
};
</script>

在这个例子中，`customRender` 函数接收两个参数：一个是 `h`，这是一个虚拟 DOM 渲染器；另一个是 `{row}`，它包含了当前行的数据。你可以在 `customRender` 函数内部创建并返回一个新的组件，其中我们指定了 `content` 和额外的 `extraProp` 数据作为组件的 props。