Technologieaustausch

Wie implementiert ein Element einen benutzerdefinierten Header?

2024-07-12

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

Manchmal müssen wir einen benutzerdefinierten Header implementieren, z. B. das Hinzufügen einer Schaltfläche zum Header. Die offizielle Beschreibung der Verwendung benutzerdefinierter Header ist jedoch relativ einfach Detail heute.

Verwenden Sie :render-header für den Header, wo ein benutzerdefinierter Header erforderlich ist, um den benutzerdefinierten Header zu aktivieren:

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

button ist eine benutzerdefinierte Methode, die die Schaltfläche zurückgeben kann.

Hinweis: Für das in der Button-Methode zurückgegebene Button-Element können Sie @click oder v-on:click nicht verwenden, um ihm eine Click-Methode hinzuzufügen. Es wird nicht erkannt und es wird ein Fehler gemeldet. Um die Pfeilfunktion zu verwenden, on-click={()=&gt;this.showinfo()}

Hier wird ein Button eingerichtet, und es gibt eine Variable, die aufzeichnet, auf welchen Button gerade geklickt wird:

Daten(){

zurückkehren{

isShow: true // Variable zur Steuerung der Schaltfläche, klicken Sie auf die Schaltfläche

   }

},

Methoden: {

Taste(){

wenn(this.isShow==true){

//Wenn auf die Schaltfläche geklickt wird, ändern Sie die Hintergrundfarbe der Schaltfläche

zurückkehren (

            <div>

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