Vuetify v-data-table，如何在 HTML 中呈现标题文本？

Question

Vuetify 文档 建议为具有 text 属性的标头传递一个 object 数组，如下所示：

 [{
    text: string;
    value: string;
    align: 'left' | 'center' | 'right';
    sortable: boolean;
    class: string[] | string;
    width: string;
}]

但是如果你通过了：

 [{
    text: string = "<div>Foo</div><div>Bar</div>;
    value: string;
    align: 'left' | 'center' | 'right';
    sortable: boolean;
    class: string[] | string;
    width: string;
}]

它不会呈现 HTML（它会转义文本）。

那么，我该如何渲染 HTML 呢？

原文由 Artur Grigio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

查看标头插槽的 Vuetify 示例。它有办法完成你的任务。

下面是确切部分的副本，只需将 {{ header.text }} 的用法替换为 Vue 的解决方案，使用 原始 HTML 强制 HTML 字符串呈现。它看起来像这样 <span v-html="header.text"></span> 。

 <template slot="headers" slot-scope="props">
  <tr>
    <th>
      <v-checkbox
        :input-value="props.all"
        :indeterminate="props.indeterminate"
        primary
        hide-details
        @click.native="toggleAll"
      ></v-checkbox>
    </th>
    <th
      v-for="header in props.headers"
      :key="header.text"
      :class="['column sortable', pagination.descending ? 'desc' : 'asc', header.value === pagination.sortBy ? 'active' : '']"
      @click="changeSort(header.value)"
    >
      <v-icon small>arrow_upward</v-icon>
      {{ header.text }}
    </th>
  </tr>
</template>

原文由 Bernardo Duarte 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我找到了解决您问题的方法：

  <template v-slot:item.description="{item}">
   <div v-html="item.description"></div>
 </template>

只需将描述替换为对象中的属性即可：

目的：

这里是对象数据表的图像

原文由 gilou.31 发布，翻译遵循 CC BY-SA 4.0 许可协议