web-dev-qa-db-fra.com

Vuetify v-data-table, comment rendre le texte d'en-tête en HTML?

documentation Vuetify suggère de passer un tableau object pour les en-têtes qui a un attribut text comme ceci:

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

Mais si vous réussissez:

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

Il ne rendra pas le HTML (il échappera au texte).

Alors, comment puis-je rendre [~ # ~] html [~ # ~] ?

vue.jsvuetify.js
5
Artur Grigio

j'ai trouvé une solution à votre problème:

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

Remplacez simplement la description par votre attribut dans votre objet:

Objet:

Et voici l'image de la table de données de l'objet

1
gilou.31

Quelque chose à noter si vous êtes sur une version mise à jour est que

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

est maintenant

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

La version dans laquelle je teste est la v2.2.8 mais elle a probablement été modifiée dans la v2

1
Anton Korab