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？

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>

Answer 2

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

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

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

对象：

这里是对象数据表的图像

Answer 3

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

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

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 中更改了