Fassen Sie die Probleme zusammen, die bei der Verwendung der Vue Element-Benutzeroberfläche auftreten

<Vorlage>
    <div>
        <el-Datumsauswahl
            Größe="klein"
            löschbar
            :picker-options="Picker-Optionen"
            v-Modell="Datumsbereich"
            Typ="Datumsbereich"
            Werteformat="jjjj-MM-tt"
            Bereichstrennzeichen = "bis"
            start-placeholder="Startdatum"
            end-placeholder="Enddatum"></el-date-picker>
    </div>
</Vorlage>

<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                pickerOptions: {
                    disabledDate (Zeit) {
                        Zeit zurückgeben.getTime() > Date.now()
                    }
                },
                Datumsbereich: []
            }
        }
    }
</Skript>

<Vorlage>
    <div>
        <el-date-picker Größe="klein" löschbar Typ="Datumsbereich" v-model="Datumsbereich"
            :picker-options="Picker-Optionen"
            Werteformat="jjjj-MM-tt"
            Bereichstrennzeichen = "bis"
            start-placeholder="Startdatum"
            end-placeholder="Enddatum"></el-date-picker>
    </div>
</Vorlage>

<Skript>
    Standard exportieren {
        Daten () {
            zurückkehren {
                pickerOptions: {
                    disabledDate (Zeit) {
                        Rückgabewert: Zeit.getTime() < Date.now() - 1 * 24 * 3600 * 1000
                    }
                },
                Datumsbereich: []
            }
        },
        betrachten:
            dateRange (val) { //Dies kann auch durch ein Änderungsereignis ersetzt werden var st = new Date(val) * 1000 / 1000
                wenn (st < Datum.jetzt()) {
                    this.dateRange = neues Datum()
                }
            }
        }
    }
</Skript>

// arrayUtil.js
/**
 * @description Sicheres Abrufen der Indexdaten, die dem Array entsprechen* @param { Array } arr
 * @param { int } Index
 */
exportiere const saveGet = (arr, index) => {
    wenn(arr & Array.isArray(arr)) {
        gibt arr[index] zurück;
    } anders {
        Rückgabe undefiniert;
    }
}

// .vue fileimport { saveGet } von './utils/arrayUtil';

<el-Datumsauswahl 
    Typ="Datumsbereich" 
    v-Modell="Datum" 
    Werteformat="jjjj-mm-tt" 
    Format="jjjj-mm-tt" 
    start-placeholder="Startdatum" 
    end-placeholder="Enddatum" 
    Stil="width: 100%;"></el-date-picker>

Standard exportieren {
    Daten() {
        zurückkehren {
            Datum: [] // Datumsbereich}
    },
    // Berechnen Sie die an das Backend übergebenen Parameter (aufgeteiltes Datumsbereichs-Array)
    berechnet: {
        queryParams() {
            zurückkehren {
                ... ...
                vonDatum: saveGet(this.form.date, 0),
                toDate: saveGet(dieses.Formular,Datum, 1),
                ... ...
            };
        }
    },
}

<el-select placeholder="Bitte auswählen" style="width:100%" filterbar v-model="info" löschbar >
    <el-Option
      v-for="Element in Infoliste"
      :Schlüssel="info.id"
      :label="`Name: ${item.name} - ID-Nr.: ${item.idNo}`"
      :Wert="Artikel-ID">
      <span style="float: left">{{ Artikel.Tabellenname }}</span>
      {{ Artikel.Ebene }}</span>
    </el-Option>
</el-Auswahl>

// Übergeordnete Komponente <el-button type="primary" size="mini" @click="dialogVisible=true">Hinzufügen</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>

// Unterkomponente <template>
    <el-dialog title="Neu" :visible.sync="dialogSichtbar" @close="closeDialog">
</Vorlage>

<Skript>
Standard exportieren {
  Requisiten: {
      dialogSichtbar: {
          Typ: Boolean,
          Standard: false
      }
  },
  Methoden:{
      //Dialog schließen
      Dialog schließen(){
        dies.$emit('update:closeDialog', false);
      }
  },
};
</Skript>

// Übergeordnete Komponente <el-button type="primary" size="mini" @click="dialogVisible=true">Hinzufügen</el-button>
<com-dialog :dialogVisible.sync="dialogVisible" @closeDialog="closeDialog"></com-dialog>

// Unterkomponente <template>
    <el-dialog title="Neu" :visible.sync="dialogVisible" :before-close="closeDialog">
</Vorlage>

<Skript>
Standard exportieren {
  Requisiten: {
      dialogSichtbar: {
          Typ: Boolean,
          Standard: false
      }
  },
  Methoden:{
      //Dialog schließen
      Dialog schließen(){
        dies.$emit('closeDialog', false);
      }
  },
};
</Skript>

<el-form-item prop="name">
    <span slot="Bezeichnung">
        Benutzername<i>(Buchstaben, Zahlen und Sonderzeichen werden unterstützt)</i>
    </span>
    <el-input v-Modell="Name"></el-input>
</el-form-item>

<el-input placeholder="Bitte eingeben" v-model="form.name" clearable ref="nameRef" @clear="clearInput('nameRef')"></el-input>
                             
// Formularinhalt löschen event clearInput (refName) {
    dies.$refs[refName].focus()
}