Vuetify 在数据表单元格中使用 v-html答案

【问题标题】：Vuetify use v-html inside data table cellVuetify 在数据表单元格中使用 v-html
【发布时间】：2021-02-21 04:55:34
【问题描述】：

我有一个对象，其值来自服务器，带有 span,p 等 HTML 标签，我正在使用 vuetify 数据表来显示这些值，问题是我没有知道如何在表格单元格中呈现这个 HTML 我知道有 v-html 指令，但是如何将此指令与 vuetify 一起使用。我找到了一个修改特定列值的示例：

   <v-data-table
     :headers="headers"
     :items="rows"
     :search="search"
     dense>
     
     <template v-slot:item.name="{ item }">
       <span v-html="item.name"></span>
     </template>

   </v-data-table>

这里 name 只是一列，如何为每一列使用此示例？

【问题讨论】：

Vuetify v-date-table 为您发送的每个标头提供插槽。阅读文档，那里有很多例子。
如果您正在渲染html 标签，请使用div 而不是span。将p（块元素）放入span（内联元素）是一种不好的做法。
我知道v-date-table 中的插槽，我已尝试从tbody 重写功能而没有任何更改
请不要将答案编辑成问题。而是创建一个答案。

标签： javascript vue.js vuetify.js

【解决方案1】：

您可以通过循环 headers 值动态地做到这一点：

 <v-data-table
     :headers="headers"
     :items="rows"
     :search="search"
     dense>
     
     <template v-for="header in headers" v-slot:item[header.value]="{ item }">
       <div v-html="item[header.value]"></div>
     </template>

   </v-data-table>

【讨论】：

它仍然显示 HTML 标签

【解决方案2】：

当我尝试使用插槽的解决方案时（见上文），ESLint 引发错误：“一个元素不能有多个分布到同一个插槽的 <template> 元素”。为了解决这个问题，我使用了 v-simple-table 代替了 v-data-table 并使用了 v-html 来渲染表格数据（参见codepen）。但要注意，v-html只能在用户不修改表数据的情况下使用，否则有可能发生XSS攻击。

<v-simple-table>
      <template v-slot:default>
        <thead>
          <tr>
            <th v-for="header in headers" :key="header.value" class="text-left">
              {{ header.value }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="item in desserts"
            :key="item.name"
          >
            <td v-for="header in headers" :key="header.value" v-html="item[header.value]"></td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>

【讨论】：