Vue+Element - benutzerdefinierte Abfragekomponente

// dataForm.vue
<Vorlage>
  <el-Zeile>
    <input-form v-for="(item,index) in options" :key="'dataForm_'+index"> 
      <!-- Eingabefeld-->
      <Eingabeformular
        :Schlüssel="Index"
        v-if="Artikel.Typ == 'Eingabe'"
        :Daten='Artikel'
      ></Eingabeformular>
  </el-row>
</Vorlage>
<Skript>
importiere EventBus aus "@/assets/js/eventBus.js"
importiere InputForm "@/components/dataForm/InputForm"
Standard exportieren {
  Komponenten:
    Eingabeformular,
  },
  Requisiten: {
    /**
     * Formularkonfigurationselemente * @param {Object} Option Konfigurationsparameter wie folgt:
     * Typ: Formularelementtyp, Zeichenfolge, optionale Werteingabe
     */
    Optionen:
      Typ: Array,
      Standard() {
        zurückkehren [];
      },
    },
  },
  Daten() {
   zurückkehren {}
  },
  erstellt() {
   // Dies dient hauptsächlich dazu, das Anzeigen und Ausblenden anderer Unterkomponenten in der Dropdown-Box zu realisieren EventBus.$on("refreshDataForm", e => {
      diese.refreshDataForm(e);
    });
  },
  // Seitenzerstörungsereignis destruction beforeDestroy() {
    EventBus.$off("refreshDataForm")
    EventBus.$off("HandleClick")
  },
  Methoden: {
   // Formulardaten aktualisieren refreshDataForm(item) {
      let data = diese.Optionen
      Daten.fürJeden((e, i) => {
        wenn (Artikel.Typ == e.Typ && Artikel.Name == e.Name) {
          diese.Optionen[i] = Artikel
        }
      })
    },
    // Das Klickereignis der untergeordneten Komponente reagiert auf die übergeordnete Komponente und die Daten werden übertragen handleClick(data) {
     EventBus.$emit("HandleClick",Daten)
    },
    //Formatieren Sie die Formulardaten (Sie können überprüfen, ob die erforderlichen Elemente erforderlich sind)
    getDataForm() {
     let data = diese.Optionen
     let formObj = {}
     lass Fehler = ''
     versuchen {
      Daten.fürJedes(e => {
       wenn (e.Typ === ''Eingabe) {
        wenn (e.erfordern && !e.inhalt) {
         Fehler = 'Bitte eingeben' + e.label
         Fehler auslösen
        }
        formObj[e.name] = e.inhalt
       } sonst wenn (e.type === 'select' || e.type === 'dataSelect') {
        wenn (e.erfordern && !e.inhalt) {
         Fehler = 'Bitte wählen' + e.label
         Fehler auslösen
        }
        formObj[e.name] = e.inhalt
       } sonst wenn (e.type === 'date' || e.type === 'dataRadio') {
        wenn (e.erfordern && !e.inhalt) {
         Fehler = 'Bitte wählen' + e.label
         Fehler auslösen
        }
        formObj[e.beginName] = e.beginRegTime
        formObj[e.endName] = e.endRegTime
       } sonst wenn (e.type === 'image') {
        formObj[e.name] = e.datei || e.inhalt
       } sonst wenn (e.type === 'upload') {
        formObj[e.name] = e.datei || e.inhalt
        if (e.delFileName) { // Lösche die Anhangssammlung und den benutzerdefinierten Namen und den Standardnamen formObj[e.delFileName] = e.delFileIds.join(',')
        } anders {
         formObj['delFileName'] = e.delFileIds.join(',')
        }
       }
      })
      RückgabeformularObj
     } Fehler abfangen {
      this.$message({ Nachricht:Fehler, Typ: 'Fehler'})
     }
    }
  }
}

<Vorlage>
  <el-col>
    <el-col :span="data.boxSpan?data.boxSpan:boxSpan" v-if="!data.isHide">
     <el-col :span="data.infoSpan?data.infoSpan:infoSpan" >
      <el-col :span="data.infoSpan?data.infoSpan:infoSpan" v-if="data.labelSpan!=0">
       <label class="el-form-item_label" :class="{'erfordern': data.erfordern}" v-html="data.label"></label>
      </el-col>
      <el-col :span="data.contentSpan?data.contentSpan:contentSpan" v-if="data.contentSpan!=0">
       <el-input :class="{'base_textarea': data.textarea}" v-modle.trim="data.content" :type="data.textarea?'textarea':''" :disable="data.readOnly" :placeholder="setPlaceholder" maxlength="200"></el-input>
      </el-col>
     </el-col>
      <span v-text="Titel"></span>
    </div>
  </el-col>
</Vorlage>
<Skript>
Standard exportieren {
 Requisiten: {
  // Geben Sie die Eingabe ein Eingabefeldtyp: {
   Typ: Zeichenfolge,
   Standard: „Eingabe“
  },
  //Standard-Zaunlayout 8/24
  boxSpan: {
   Typ: Nummer,
   Standard: 8
  },
  // Standard-Zaunlayout 24/24
  infoSpan: {
   Typ: Nummer,
   Standard: 24
  },
  //Standard-Zaunlayout 8/24
  Spanne: {
   Typ: Nummer,
   Standard: 8
  },
  //Standard-Zaunlayout 16/24
  Inhaltsspanne: {
   Typ: Nummer,
   Standard: 16
  },
  /**
  * Name Schlüsselwort * Typ Formulartyp * Bezeichnung Formulartitel * Inhalt Formularinhalt * readOnly schreibgeschützt Standard nein * isHide versteckt Standard nein * Textbereich Texttyp Standard nein **/
  Daten: {
   Typ: Objekt,
   Standard() {
    zurückkehren []
   }
  }
 },
 berechnet: {
  setzePlatzhalter() {
   wenn(diese.Daten.NurLesezugriff && !diese.Daten.Inhalt) {
    zurückkehren ''
   } 
   return 'Bitte eingeben'
  }
 }
}
</Skript>
<Stilbereich>
 // Erforderlich style.require::after {
  Inhalt: '*';
  Farbe: rot;
 }
 // Flex-Layout-Titel vertikal zentriert.el-form-item__label {
  schweben: rechts;
  Rand unten: 0;
  Zeilenhöhe: 20px;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Mindesthöhe: 40px;
 }
</Stil>

<Vorlage>
  <el-Zeile>
    <Datenformular: Optionen = 'Sucharray', Ref = 'Sucharray'></Eingabeformular>
  </el-row>
</Vorlage>

<Skript>
 importiere EventBus aus "@/assets/js/eventBus.js"
 importiere DataForm "@/components/dataForm/dataForm"
 Standard exportieren {
  Komponenten:
   Datenformular
  },
  Daten() {
   zurückkehren {
    // Menükonfiguration abfragen searchArray: [
     {
      Name: "Personenname",
      Typ: "Eingabe",
      Bezeichnung: 'Benutzername',
      Inhalt: ''
     },
     {
      Name: 'personName2',
      Typ: "Eingabe",
      Bezeichnung: 'Benutzername 2',
      Inhalt: ''
     }
    ]
   }
  },
  erstellt() {
   // Auf Parameter der untergeordneten Komponente warten EventBus.$on('refreshDataForm', e => {
    diese.refreshDataForm(e)
   })
  },
  zerstört() {
   // Zerstöre den Unterkomponentenparameter, der auf EventBus.$off('refreshDataForm') lauscht.
  },
  Methoden: {
   // Auf Unterkomponentenoperationen warten refreshDataForm(e) {
    //Logikcode this.$forceUpdate()
   },
   //Datenabfrage handleQuery() {
     // Komponentenparameter abrufen und zum JSON-Format zurückkehren let searchArray = this.$refs.searchArray.getDataForm()
    // Wenn erforderliche Elemente vorhanden sind, ist der Rückgabewert null und ein Popup-Fenster wird angezeigt, wenn (!searchArray) {
     zurückkehren 
    }
    //Schnittstellenlogik abfragen}
  }
 }
</Skript>