Vuetify v-data-table，如何在HTML中渲染标题文本？
Vuetify v-data-table，如何在HTML中渲染标题文本？
提问于 2018-06-05 05:44:41
Vuetify documentation建议为具有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呢
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-06-05 06:11:16
看一下标题槽的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>Stack Overflow用户
发布于 2018-06-05 06:07:10
您需要使用headers模板插槽，而不是将它们作为道具传递：
<template slot="headers" slot-scope="props">
<th><div>Foo</div><div>Bar</div></th>
</template>Stack Overflow用户
发布于 2019-12-11 18:08:00
我找到了你的问题的解决方案：
<template v-slot:item.description="{item}">
<div v-html="item.description"></div>
</template>只需将描述替换为对象中的属性即可：
对象：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50689193
复制相关文章
相似问题