Vue3组合式API下自定义Table组件渲染自定义组件问题

核心问题分析 #

• v-html仅能渲染普通HTML字符串，无法识别Vue组件标签，因此会触发组件解析失败的警告
• 直接使用<component is="xxx">时，若传入字符串形式的组件名，Vue会将其视为原生HTML标签处理，而非Vue组件

正确实现方案 #

1. 调整列配置的render函数定义 #

让render函数返回VNode对象（通过Vue的h函数创建），而非HTML字符串，这样Table组件可直接渲染该VNode。

2. 在Table组件中集成VNode渲染逻辑 #

遍历行和列时，调用列的render函数获取VNode，通过<component>在模板中直接渲染VNode（Vue3支持模板中直接渲染VNode变量）。

完整代码示例 #

自定义Table组件（Table.vue）

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.data">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="col in columns" :key="col.data">
          <!-- 渲染render函数返回的VNode -->
          <component v-if="col.render" :is="col.render(row)" />
          <!-- 无render时展示普通字段数据 -->
          <span v-else>{{ row[col.data] }}</span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { h } from 'vue'
defineProps({
  data: {
    type: Array,
    required: true
  },
  columns: {
    type: Array,
    required: true
  }
})
</script>

父组件中使用Table并配置render函数

<template>
  <Table :data="tableData" :columns="columns" />
</template>

<script setup>
import { h, ref } from 'vue'
import Table from './Table.vue'
import MyCustomComponent from './MyCustomComponent.vue'

const tableData = ref([])

// 模拟API异步获取数据
setTimeout(() => {
  tableData.value = [
    { id: 1, name: '张三', status: 'active' },
    { id: 2, name: '李四', status: 'inactive' }
  ]
}, 1000)

const columns = [
  {
    title: 'ID',
    data: 'id'
  },
  {
    title: '姓名',
    data: 'name'
  },
  {
    title: '状态',
    data: 'status',
    // render函数通过h创建组件VNode
    render: (row) => h(MyCustomComponent, { status: row.status, userName: row.name })
  },
  {
    title: '操作',
    // 渲染原生HTML元素的VNode
    render: (row) => h('button', { onClick: () => handleEdit(row.id) }, '编辑')
  }
]

const handleEdit = (id) => {
  console.log('编辑ID:', id)
}
</script>

关键说明 #

• 必须在render函数中传入组件对象（而非组件名称字符串），通过h函数创建VNode，Vue才能正确识别并渲染组件
• 表格数据从API异步加载时，只要data是响应式变量（如ref声明），Table组件会自动响应数据变化更新渲染
• 若需渲染普通HTML片段，可通过h('div', { innerHTML: '你的HTML内容' })实现，规避直接使用v-html的XSS风险

内容的提问来源于stack exchange，提问作者meexo