Vuetify v-data-table列formatter返回HTML显示为纯文本如何解决

问题原因 #

v-data-table的formatter默认会对返回字符串做HTML转义处理，避免XSS风险，因此返回的HTML标签会被直接作为纯文本展示。此外formatter仅支持返回字符串，就算绕过转义也无法渲染<v-icon>这类Vue组件。

最优解决方式：使用列插槽（支持组件渲染） #

该方式无需配置formatter，可直接渲染原生HTML和Vuetify组件，完全满足你的需求：

1. 移除对应列的formatter配置
2. 在v-data-table内部添加对应列的专属插槽，示例如下（假设你的列字段名为price）：

<v-data-table
  :headers="headers"
  :items="tableData"
  :server-items-length="total"
  :loading="loading"
  @update:options="fetchServerData"
>
  <!-- 列插槽命名规则为 #item.你的列字段名 -->
  <template #item.price="{ value }">
    <strong>{{ value }}</strong>
    <v-icon dark small>tick-outline</v-icon>
  </template>
</v-data-table>

替代方案：v-html解析formatter返回值（仅支持原生HTML，不推荐） #

如果你必须保留formatter配置，且仅需要渲染原生HTML标签，可以通过插槽配合v-html解析内容：

<template #item.price="{ value, column }">
  <span v-html="column.formatter(value)"></span>
</template>

警告：该方案存在XSS安全隐患，仅可在formatter返回内容完全可控、无用户输入的恶意代码场景下使用，且无法渲染<v-icon>等Vue组件。

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