Zusammenfassung von 10 erstaunlichen Tricks von Element-UI

<el-Bildlaufleiste>
  <div Klasse="Box">
    <p v-for="item in 15" :key="item">Willkommen bei der Verwendung der el-scrollbar {{item}}</p>
  </div>
</el-scrollbar>

<Stilbereich>
.el-scrollbar {
  Rand: 1px durchgezogen #ddd;
  Höhe: 200px;
}
.el-scrollbar :: v-tief .el-scrollbar__wrap {
    Überlauf-y: scrollen;
    Überlauf-x: versteckt;
  }
</Stil>

<button @click="handleUpload">Datei hochladen</button>
<el-hochladen
  v-show="falsch"
  Klasse="Upload-Ressource"
  mehrere
  Aktion=""
  :http-request="KlickDatei hochladen"
  ref="hochladen"
  :on-success="Upload erfolgreich"
>
    Lokale Dateien hochladen</el-upload>

<Skript>
Standard exportieren {
    Methoden: {
        //Klick simulieren handleUpload() {
            document.querySelector(".upload-resource .el-upload").klick()
        },
        // Datei asynchron hochladen clickUploadFile(file) {
            const formData = new FormData()
            formData.append('Datei', Datei.Datei)
            const res = warte auf api.post(`xxx`, formData)
        }
        // Nachdem der Upload erfolgreich war, lösche die integrierte Dateiliste der Komponente uploadSuccess() {
            dies.$refs.upload.clearFiles()
        }
    }
}
</Skript>

<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="Bitte auswählen">
    <el-Option
      v-for="Element in Optionen"
      :Schlüssel="Artikel.Wert"
      :label="Artikel.label"
      :Wert="Artikel.Wert"
    >
        <el-tooltip
          Platzierung="oben"
          :deaktiviert="Artikelbezeichnungslänge<17"
        >
            <div Slot="Inhalt">
                <span>{{item.label}}</span>
            </div>
            <div class="iclass-text-ellipsis">{{ Element.label }}</div>
        </el-tooltip>
    </el-Option>
</el-Auswahl>

<Skript>
  Standard exportieren {
    Daten() {
      zurückkehren {
        Optionen: [{
          Wert: 'Option 1',
          Etikett: „Goldener Kuchen, goldener Kuchen, goldener Kuchen, goldener Kuchen, goldener Kuchen, goldener Kuchen, goldener Kuchen, goldener Kuchen, goldener Kuchen“
        }, {
          Wert: 'Option 2',
          Etikett: ‚Doppelhautmilch, Doppelhautmilch, Doppelhautmilch, Doppelhautmilch, Doppelhautmilch, Doppelhautmilch, Doppelhautmilch, Doppelhautmilch‘
        }, {
          Wert: 'Option 3',
          Etikett: ‚AusternomelettAusternomelettAusternomelettAusternomelettAusternomelettAusternomelettAusternomelettAusternomelett‘
        }],
        Wert: ''
      }
    }
  }
</Skript>

<Stilbereich>
.el-Auswahl {
  Breite: 300px;
}
.el-select ::v-deep .popper-Klasse {
  Breite: 300px;
}
.iclass-text-ellipsis {
  Leerzeichen: Nowrap;
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
}
</Stil>

<el-form :rules="Regeln" :model="Formular" label-width="80px">
    <el-form-item label="Aktivitätsname" prop="name">
        <el-input v-model="form.name"></el-input>
    </el-form-item>
</el-form>

<Skript>
Standard exportieren {
    Daten() {
        zurückkehren {
            bilden: {
                Name: ''
            },
            Regeln:
                Name: [
                        { erforderlich: true, Nachricht: ‚Bitte geben Sie den Aktivitätsnamen ein‘, Auslöser: ‚unscharf‘},
                        { Muster: /^(?!\s+).*(?<!\s)$/, Nachricht: 'Das erste und das letzte Leerzeichen dürfen nicht', Auslöser: 'unscharf' }
                ]
            }
        }
    }
}
</Skript>

<Stilbereich>
::v-tief .el-input__inner {
    Zeilenhöhe: 1px !wichtig;
}
</Stil>

<el-input Klasse = "clear-number-input" Typ = "Nummer"></el-input>

<Stilbereich>
.clear-number-input ::v-deep input[Typ="Nummer"]::-webkit-outer-spin-button,
.clear-number-input ::v-deep input[Typ="Nummer"]::-webkit-inner-spin-button {
    -webkit-apperance: keines !wichtig;
}
</Stil>

dies.$refs.form.validateField('name', gültig => {
    if (gültig) { 
        console.log('senden!'); 
    } anders { 
        console.log('Fehler beim Senden!'); 
        gibt false zurück; 
    }
})

<el-dialog @closed="Form zurücksetzen">
    <el-form ref="form">
    </el-form>
</el-dialog>

<Skript>
Standard exportieren {
    Methoden: {
        Formular zurücksetzen() {
            dies.$refs.form.resetFields()
        }
    }
}
</Skript>

<el-dialog :visible.sync="sichtbar" v-if="sichtbar" beim Schließen zerstören>
</el-dialog>

<el-table-column
  prop="Adresse"
  label="Adresse"
  Breite="180"
  Überlauf-Tooltip anzeigen
>
</el-Tabellenspalte>