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

Question

Vuetify documentation 建议为具有 text 属性的 headers 传递一个 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？

Answer 1

您需要使用 headers 模板插槽而不是将它们作为道具传递：

  <template slot="headers" slot-scope="props">
    <th><div>Foo</div><div>Bar</div></th>
  </template>

Answer 2

查看 header 插槽的 Vuetify example。它有办法完成你的任务。

下面是确切部分的副本，只需将 {{ header.text }} 用法替换为 Vue 使用 raw 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>

Answer 3

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

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

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

对象：

And here the image of the object data-table

Answer 4

如果您使用的是更新版本，需要注意的是

<template slot="headers" slot-scope="props">
<th><div>Foo</div><div>Bar</div></th>

现在

<template slot="header" slot-scope="props">
<th><div>Foo</div><div>Bar</div></th>

我正在测试的版本是 v2.2.8，但它可能在 v2 中发生了变化

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

Vuetify v-data-table , how to render header text in HTML?

vue.js

vuetify.js