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呢
发布于 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>
发布于 2018-06-05 06:07:10
您需要使用headers
模板插槽,而不是将它们作为道具传递:
<template slot="headers" slot-scope="props">
<th><div>Foo</div><div>Bar</div></th>
</template>
发布于 2019-12-11 18:08:00
我找到了你的问题的解决方案:
<template v-slot:item.description="{item}">
<div v-html="item.description"></div>
</template>
只需将描述替换为对象中的属性即可:
对象:
https://stackoverflow.com/questions/50689193
复制相似问题