Question

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

[{
    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 example。它有完成任务的方法。

下面是精确部分的副本，只需使用raw HTML将{{ header.text }}用法替换为Vue的解决方案，以强制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

您需要使用headers模板广告位，而不是将其作为道具传递：

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

Answer 3

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

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

Answer 4

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

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

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

对象：

And here the image of the object data-table

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

4 个答案: