Vuetify Dokumentacja sugeruje, aby przejść do tablicy {X0}} dla nagłówków, które ma text Atrybut jak:

[{
    text: string;
    value: string;
    align: 'left' | 'center' | 'right';
    sortable: boolean;
    class: string[] | string;
    width: string;
}]

Ale jeśli przejdziesz:

[{
    text: string = "<div>Foo</div><div>Bar</div>;
    value: string;
    align: 'left' | 'center' | 'right';
    sortable: boolean;
    class: string[] | string;
    width: string;
}]

Nie spowoduje to HTML (ucieknie z tekstu).

Jak więc oddać HTML ?

5
Artur Grigio 5 czerwiec 2018, 00:44

3 odpowiedzi

Najlepsza odpowiedź

Spójrz na Vuetyfikuj przykład gniazda nagłówka. Ma środki do wykonania zadania.

Poniżej znajduje się kopia z dokładnej części, należy wymienić użycie {{ header.text }} za pomocą roztworu Vue za pomocą RAW HTML wymuszanie renderowania ciągów HTML. To będzie wyglądać jak coś takiego <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>
10
Bernardo Duarte 8 czerwiec 2018, 14:09

Musisz użyć gniazda szablonu headers zamiast przekazywać je jako prop:

  <template slot="headers" slot-scope="props">
    <th><div>Foo</div><div>Bar</div></th>
  </template>
2
Jpod 4 czerwiec 2018, 22:07

Znalazłem rozwiązanie twojego problemu:

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

Wystarczy zastąpić opis atrybutem w obiekcie:

Obiekt:

I tutaj obraz tabeli danych obiektów

1
gilou.31 11 grudzień 2019, 10:07