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

Question

Vuetify文档建议为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示例.它有完成任务的方法.

下面是精确部分的副本,只需{{ header.text }}使用原始HTML替换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>