Vue中使用VueTableDynamic渲染HTML内容的问题求助

要在VueTableDynamic的特定列渲染HTML（如下载链接），不能直接传递HTML字符串（会被转义），可以通过插槽或列render函数实现，以下是具体方案：

步骤1：修改数据存储方式 #

先把数据里的HTML字符串替换为原始数据（比如文件URL），避免直接存HTML：

this.invoices_params.data.push([
  invoice.invoice_number,
  invoice.user.company_name || `${invoice.user.first_name} ${invoice.user.last_name}`,
  invoice.total,
  (119 / 100) * invoice.total,
  // 存原始URL而非HTML字符串
  invoice.media.length > 0 ? invoice.media[0].original_url : null,
  moment(invoice.created_at).format('DD-MM-YYYY H:m:s'),
]);

方式一：使用组件插槽（推荐） #

VueTableDynamic支持按列索引定义插槽，插槽名称格式为column-列索引（从0开始计数，你的下载链接列是第5列，对应索引4）：

<div class="col-lg" v-if="checkbox_invoices">
  {{ trans.invoices.title }}
  <vue-table-dynamic :params="invoices_params">
    <!-- 对应第5列的自定义插槽 -->
    <template slot="column-4" slot-scope="{ row }">
      <a v-if="row[4]" :href="row[4]">Download invoice</a>
      <span v-else>No invoice</span>
    </template>
  </vue-table-dynamic>
</div>

这种方式完全符合Vue的模板语法，直观且易维护。

方式二：使用列的render函数 #

如果习惯用JS方式控制渲染，可以在columns配置中给对应列添加render方法：

// 初始化或更新invoices_params时配置columns
this.invoices_params = {
  columns: [
    { label: 'Invoice Number' },
    { label: 'Client' },
    { label: 'Total' },
    { label: 'Total with Tax' },
    { 
      label: 'Invoice File',
      // render函数接收createElement方法、当前行数据、行索引
      render: (h, row) => {
        const fileUrl = row[4];
        if (fileUrl) {
          // 创建<a>标签的虚拟DOM节点
          return h('a', {
            attrs: { href: fileUrl },
            style: { color: '#1890ff' } // 可选：自定义样式
          }, 'Download invoice');
        } else {
          return h('span', 'No invoice');
        }
      }
    },
    { label: 'Created At' }
  ],
  data: []
};

为什么原始方法无效？ #

VueTableDynamic默认会对传入的字符串做HTML转义（防止XSS风险），所以直接传递的HTML字符串会被当作普通文本显示。通过插槽或render函数，我们是直接告诉Vue要渲染的DOM结构，而非转义后的文本，因此能正确解析HTML元素。

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