Maison  >  Questions et réponses  >  le corps du texte

"Comment insérer des images dans l'en-tête du tableau dans vue.js 3"

<p>J'utilise v-data-table de vue.js 3 et je souhaite insérer une image dans l'en-tête du tableau. J'ai donc essayé de remplacer le modèle d'en-tête du tableau : </p> <pre class="lang-html Prettyprint-override"><code><template v-for="en-tête dans les en-têtes" v-slot :[`header.${header.value}`]=" ;{ en-têtes }"> {{ en-tête }} </modèle> </code></pre> <p>Cette méthode est efficace. Cependant, si j'inclus l'image comme celle-ci, j'obtiens une erreur : </p> <pre class="lang-html Prettyprint-override"><code><template v-for="en-tête dans les en-têtes" v-slot :[`header.${header.value}`]=" ;{ en-têtes }"> {{ en-tête }} <span v-if="header.text=='SomeText'"><img :src="require('@/assets/image_1.png')" /></span> ; <span v-if="header.text=='SomeOtherText'"><img :src="require('@/assets/image_2.png')" /></span> ; </modèle> </code></pre> <p>Le message d'erreur est le suivant :</p> <pre class="brush:php;toolbar:false;">Erreur 14:3 Les éléments de l'itération s'attendent à avoir des directives 'v-bind:key' vue/require-v-for-key</pre> <p>Je serais heureux si quelqu'un pouvait me donner des conseils. </p>
P粉550257856P粉550257856442 Il y a quelques jours521

répondre à tous(1)je répondrai

  • P粉127901279

    P粉1279012792023-08-28 00:16:35

    Essayez de saisir un élément imbriqué basé sur l'index du titre actuel :

    <template v-for="(header,i) in headers" v-slot:[`header.${header.value}`]="{ headers }">
        <span :key="'text'+i"> {{ header.text }}</span>
        <span :key="'img1'+i" v-if="header.text=='SomeText'"><img :src="require('@/assets/image_1.png')" /></span>
        <span :key="'img2'+i" v-if="header.text=='SomeOtherText'"><img :src="require('@/assets/image_2.png')" /></span>
    </template>

    répondre
    0
  • Annulerrépondre