Partage de technologie

Comment l'élément implémente-t-il un en-tête personnalisé ?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Parfois, nous devons implémenter un en-tête personnalisé, comme ajouter un bouton à l'en-tête. Pour le moment, nous devons utiliser un en-tête personnalisé. Cependant, la description officielle de l'utilisation des en-têtes personnalisés est relativement simple. détail aujourd'hui.

Utilisez :render-header sur l'en-tête lorsqu'un en-tête personnalisé est requis pour activer l'en-tête personnalisé :

<el-table-column :render-header="button"></el-table-column>

Button est une méthode personnalisée qui peut renvoyer le bouton.

Remarque : Pour l'élément bouton renvoyé dans la méthode bouton, vous ne pouvez pas utiliser @click ou v-on:click pour y ajouter une méthode click. Elle ne sera pas reconnue et une erreur sera signalée. Pour utiliser la fonction flèche, on-click={()=&gt;this.showinfo()}

Un bouton est configuré ici, et il y a une variable pour enregistrer sur quel bouton est actuellement cliqué :

données(){

retourner{

isShow : true // Variable pour contrôler le bouton, cliquez sur le bouton

   }

},

méthodes : {

bouton(){

si(this.isShow==true){

//Si le bouton est cliqué, change la couleur d'arrière-plan du bouton

retour (

            <div>

<el-button on-click={()=>this.show()} style="background: #ffc9c9; color:#606266"&gt;Chanson en cours</el-button>