So kapseln Sie Abfragekomponenten basierend auf Element-UI Schritt für Schritt

// Methoden
initSearch() {
  const searchArr = this.searchArr
  wenn (Sucharr && Sucharr.Länge) {
    let searchForm = {}
    suchArr.fürJeden((val) => {
      Suchformular[Wert.Schlüssel] = ''
    })
    this.searchForm = Suchformular
  }
}
// montiert
montiert () {
    dies.initSearch()
},

// Methoden
initSearch() {
  const searchArr = this.searchArr
  wenn (Sucharr && Sucharr.Länge) {
    let searchForm = {}
    suchArr.fürJeden((val) => {
      Suchformular[Wert.Schlüssel] = ''
    })
    this.searchForm = Suchformular
  }
}
// montiert
montiert () {
    dies.initSearch()
},

// Props übergibt ein SearchArr-Array, um die Abfragebedingungen zu beschreiben/**
 * Beschreibung der Abfragebedingung */
Sucharr: {
  Typ: Array,
  Standard: () => []
},
// data definiert zwei Variablen, searchForm: das an das Backend übergebene Abfragefeld, selectOption: Dropdown-Daten searchForm: {},
Auswahloption: {}
// gemountete Initialisierungsdaten initSearch () {
  const searchArr = this.searchArr
  wenn (Sucharr && Sucharr.Länge) {
    let searchForm = {}
    suchArr.fürJeden((val) => {
      searchForm[val.__key] = '' // Benutzerdefiniertes Feld herausnehmen, in searchForm einfügen und einen leeren String zuweisen this.setOption(val) // Wenn es sich um Dropdown-Daten handelt, Dropdown-Liste selectOption zuweisen })
    this.searchForm = Suchformular
  }
},
// Methoden setzen Dropdown-Daten asynchron setOption (val) {
  wenn (~['select', 'mulSelect'].indexOf(val.__type)) {
    // Im ersten Fall, wenn die Dropdown-Daten lokal fest codiert sind, if (val.data && Array.isArray(val.data)) {
      dies.$set(diese.selectOption, val.__key, val.data)
    } sonst wenn (val.fetchUrl) {
      // Im zweiten Fall, wenn die Pulldown-Daten von der Hintergrundschnittstelle übergeben werden const result = await request({
        URL: val.fetchUrl,
        Methode: val.method || 'post'
      })
      if (Ergebnis && Ergebnis.Daten && Ergebnis.Daten.Erfolg) {
        dies.$set(diese.selectOption, val.__key, result.data.list || [])
      }
    }
  }
},

// Renderfunktion <div class="searchTable">
    <el-form
      inline={true}
      Requisiten = {{Modell: this.searchForm}}
      ref="Suchformular"
      Klasse="Suchformular">
      { 
        suchArr.map((o) => {
          Komponenten[o.__Typ] zurückgeben? Komponenten[o.__Typ](h, o, dies): ''
        })
      }
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" on-click={ queryTable }>Abfrage</el-button>
        <el-form-item>
          <el-Link 
            Stil="Rand links: 10px;"
            Typ="primär" 
            unterstreichen={ false } 
            on-click={ () => { this.moreShow = !this.moreShow } }>Weitere Abfragen</el-link>
        </el-form-item>
      </el-form-item>
      <div Klasse = "more-search animiert" 
           Klasse = { this.moreShow ? 'fadeInDown' : 'fadeOutUp' } 
           v-show={ diese.mehrShow }>
           // ...weitere Abfragen</div>
    </el-form>
</div>

  /**
   * Warum wurde das Eingabefeld entfernt? Hier müssen wir nur eine Tabellenabfrage durchführen. 
   * Tatsächlich, wenn Sie die Komponente zur Formularübermittlung wie den Popup-Fensterrahmen kapseln möchten. Sie können die Logik hier auch wiederverwenden* @param { Function } h h von Vue bereitgestellte Funktion* @param { Object } vom Benutzer geschriebenes Elementbeschreibungsobjekt* @param { Object } vm Vue-Instanz*/
  exportiere const input = Funktion (h, Artikel, vm) {
    const { Suchform } = vm
    zurückkehren (
      <el-form-item label={item.label}>
        <el-Eingabe
          Größe="klein"
          bei Eingabe = {(v) => { Suchformular[item.__key] = v }}
          Requisiten={{
            Wert: Suchformular[item.__key],
            Platzhalter: „Inhaltsinformationen eingeben“,
            ...Artikel
          }}
        >
        </el-Eingabe>
      </el-form-item>
    )
  }

  /**
   * 
   * @param { Function } h h von Vue bereitgestellte Funktion* @param { Object } vom Benutzer geschriebenes Elementbeschreibungsobjekt* @param { Object } vm Vue-Instanz*/
  exportiere const select = Funktion (h, Element, vm) {
    Konstante { 
      Suchformular = {}, 
      Auswahloption = {}, 
    } = vm
    /**
     * Auf Dropdown-Änderungsereignisse warten* @param { String | Number | Boolean } value Den Wert der Dropdown-Daten auswählen* @param { Object } value 
     */
    const selectChange = Funktion (Wert, Element) { 
      Suchformular[item.__key] = Wert
      vm.$emit('bei Änderung', Wert)
    }
    zurückkehren (
      <el-form-item label={item.label}>
        <el-Auswahl
          Requisiten={{
            Wert: Suchformular[item.__key],
            Platzhalter: "===Bitte wählen===",
            filterbar: true,
            löschbar: wahr,
            ...Artikel
          }}
          bei Änderung={ (Wert) => { Änderung auswählen(Wert, Element) } }
          Größe="klein">
            {
              wähleOption[item.__key] && wähleOption[item.__key].map((o) => {
                zurückkehren (
                  <el-Option 
                    Schlüssel={ o.Wert } 
                    Bezeichnung={ o.text } 
                    Wert={ o.Wert } >
                  </el-Option>
                )
              })
            }
        </el-Auswahl>
      </el-form-item>
    )
  }
  
    /**
   * 
   * Für ein Dropdown-Feld mit Mehrfachauswahl können Sie basierend auf der Einzelauswahlmethode zwei Eigenschaften hinzufügen. Durch das Schreiben dieser Methode können Benutzer ein paar Wörter weniger auswählen.
   * @param { Function } h h von Vue bereitgestellte Funktion* @param { Object } vom Benutzer geschriebenes Elementbeschreibungsobjekt* @param { Object } vm Vue-Instanz*/
  exportiere const mulSelect = Funktion (h, Artikel, vm) {
    item['mehrere'] = wahr
    Element ['Tags ausblenden'] = wahr
    Rückgabewert: select(h, item, vm)
  }

    Komponenten[o.__Typ] zurückgeben? Komponenten[o.__Typ](h, o, dies): ''

Sucharr: [
    {
      __Typ: "Eingabe",
      Bezeichnung: 'Name',
      __Schlüssel: "Name"
    },
    {
      __Typ: "Auswählen",
      Bezeichnung: "Geschlecht",
      __key: 'Geschlecht',
      fetchUrl: "/getSelect",
      Methode: 'post'
      // Daten: [
      // { Text: 'Nein', Wert: '1' },
      // { text: 'Weiblich', value: '0' },
      // ]
    },
]

Mock.mock(/\/getSelect/, 'post', () => {
  zurückkehren {
    Status: 200,
    Erfolg: wahr,
    Nachricht: "Erfolgreich abschließen",
    Liste: [
      {
        Text: 'Mann',
        Wert: '1'
      },
      {
        Text: 'Frau',
        Wert: '2'
      }
    ],
    Gesamt: Daten.Liste.Länge
  }
})

=============== Requisiten ===============
/**
 * Wie viele externe Abfragebedingungen werden angezeigt*/
Anzahl der Frontseiten: {
  Typ: Nummer,
  Standard: 2
},
/**
 * Wie viele weitere Abfragebedingungen werden angezeigt*/
zurückAnzahl: {
  Typ: Nummer,
  Standard: 3
}
================ End-Requisiten ===============

=============== berechnet ===============
// Die auf der Seite angezeigten Abfragebedingungen frontSearchArr: function () {
  gib this.searchArr.slice(0, this.frontCount) zurück
},
// In weiteren Abfragen angezeigte Bedingungen backSearchArr: function () {
  gib dies.searchArr.slice zurück(diese.frontCount, diese.searchArr.length)
},
// Breite zurückgeben getSpan: function () {
  const yu = this.backSearchArr.length % this.backCount // Rest const duan = 24 / this.backCount // Breite jeder Bedingung if (yu === 0) {
    Rückkehr 24
  } anders {
    Rückkehr 24 - Duan
  }
}
================ Ende berechnet ===============

============== rendern ==============
  <div
    Stil = {`Breite: ${this.backCount * 265 + 30}px`}
    Klasse = { this.moreShow ? `${className} fadeInDown` : `${className} fadeOutUp` } 
    v-show={ diese.mehrShow }>
    <el-Zeile>
    {
      zurückSearchArr.map((o) => {
        zurückkehren (
          <el-col span={24 / this.backCount}>
            { Komponenten[o.__Typ] ? Komponenten[o.__Typ](h, o, dies) : '' }
          </el-col>
        )
      })
    }
      <el-col class="searchBtn" span={ getSpan } >
        <el-button size="small" type="primary" icon="el-icon-search" on-click={ queryTable }>Abfrage</el-button>
        <el-button size="small" type="default" icon="el-icon-upload2" on-click={ () => { this.moreShow = !this.moreShow } }>Verkleinern</el-button>
      </el-col>
    </el-row>
  </div>
=============== Rendern beenden ==============

{
  __Typ: "Auswählen",
  __key: 'Provinz',
  __fetchUrl: '/getProvince',
  __Methode: "get",
  __nextKey: 'Stadt',
  __nextFetch: '/getCity',
  __nextParam: ['Provinz'],
  __nextMethod: "abrufen",
  __emptyArr: ['Stadt', 'Bezirk'],
  Bezeichnung: 'Provinz',
  Beschriftungsbreite: '40px',
},
{
  __Typ: "Auswählen",
  __key: 'Stadt',
  __Methode: "get",
  __nextKey: 'Bezirk',
  __nextFetch: '/getDistrict',
  __nextParam: ['Provinz', 'Stadt'],
  __nextMethod: "abrufen",
  __emptyArr: ['Bezirk'],
  Bezeichnung: 'Stadt',
  Beschriftungsbreite: '40px',
},
{
  __Typ: "Auswählen",
  __key: 'Bezirk',
  Bezeichnung: 'Bezirk',
  Beschriftungsbreite: '40px',
}

__nextKey: 'city', // Welchen Dropdown-Daten wird ein Wert zugewiesen?__nextFetch: '/getCity', // Anforderungsschnittstelle für die Zuweisung__nextParam: ['province'], // Anforderungsparameter__nextMethod: 'get', // Anforderungsmethode__emptyArr: ['city', 'district'] // Welche Dropdown-Kategorien müssen gelöscht werden, wenn die Dropdown-Daten geändert werden?/**
 * Auf Dropdown-Änderungsereignisse warten* @param { String | Number | Boolean } value Den Wert der Dropdown-Daten auswählen* @param { Object } value 
 */
const selectChange = asynchrone Funktion (Wert, Element) { 
  Suchformular[item.__key] = Wert
  // Dropdown-Liste und Dropdown-Daten leeren, wenn (Element && Element.__emptyArr) {
    für (sei i = 0; i < item.__emptyArr.length; i++) {
      let Schlüssel = item.__emptyArr[i]
      wenn (AuswahlOption[Schlüssel]) {
        wähleOption[Schlüssel] = []
      }
      vm.$set(Suchformular, Schlüssel, '')
    }
  }
  wenn (Artikel && Artikel.__nextFetch && Artikel.__nextParam) {
    let param = {}
    für (let j = 0; j < item.__nextParam.length; j++) {
      let Wert = Suchformular[item.__nextParam[j]]
      wenn (Wert) {
        param[item.__nextParam[j]] = Wert
      }
    }
    const res = warte auf Anfrage({
      URL: item.__nextFetch,
      Methode: item.__nextMethod || 'post'
    }, Parameter)
    wenn (res) {
      let { Daten } = res
      wenn (Daten && Daten.Erfolg) {
        vm.$set(Auswahloption, Element.__nächsterSchlüssel, Daten.Liste)
      }
    }
  }
  vm.$emit('bei Änderung', Wert)
}

/**
 * Datumsauswahl * @param {*} h 
 * @param {*} Element 
 * @param {*} vm 
 */
exportiere const Datum = Funktion (h, Artikel, vm) {
  const { Suchform } = vm
  zurückkehren (
    <el-form-item label={item.label} labelBreite={item.labelBreite}>
        <el-Datumsauswahl
        bei Eingabe = {(v) => { Suchformular[item.__key] = v }}
        Requisiten={{
          Typ: "Datum",
          Größe: 'klein',
          Wert: Suchformular[item.__key],
          Platzhalter: "Wählen Sie ein Datum",
          ...Artikel
        }}
      >
      </el-Datumsauswahl>
    </el-form-item>
  )
}

// Bei Verwendung von searchArr { hinzufügen
  __Typ: "Datum",
  __key: 'Geburtstag',
  Beschriftung: „Geburtstag“
}

        <query-info ref="queryInfo" on-remove={this.removeTag} Auswahloption={ this.selectOption }></query-info>

Tag entfernen (Name) {
  this.searchForm[name] = ''
  diese.queryTable()
}

// Abfrage queryTable () {
  dies.$refs.queryInfo && dies.$refs.queryInfo.queryTable(dieses.searchForm)
  this.moreShow = false
  dies.$emit('Suche', dies.Suchformular)
}

<Vorlage>
  <div Klasse="QueryInfo">
    <el-tag
      v-for="Tag in Tags"
      :key="tag"
      verschließbar
      Stil="Rand rechts: 10px;"
      @close="close(tag)"
      >
      {{displayName(tag)}}
    </el-tag>
  </div>
</Vorlage>

<Skript>
importiere { getTitle } von '@/utils/utils'
Standard exportieren {
  Requisiten: {
    // Dropdown-DatenauswahlOption: {
      Typ: Objekt,
      Standard: () => []
    }
  },
  Daten () {
    zurückkehren {
      // Abfragebedingungen searchForm: {}
    }
  },
  berechnet: {
    /// Berechnen Sie die Eingabebedingungen Array-Tags: function () {
      let-Tags = []
      let keys = Objekt.keys(dieses.Suchformular)
      Schlüssel.fürJeden((Schlüssel) => {
        wenn (diese.Suchform[Schlüssel]) {
          tags.push(Schlüssel)
        }
      })
      Rückgabe-Tags
    }
  },
  Methoden: {
    // Zum Schließen klicken close (Tag) {
      this.searchForm[tag] = ''
      dies.$emit('entfernen', tag)
    },
    // Extern aufgerufene Methode queryTable (searchForm) {
      dieses.Suchformular = JSON.parse(JSON.stringify(Suchformular))
    },
    // Anzeigename, wenn es sich um Dropdown-Daten handelt, mit dem Namen in den Dropdown-Daten übereinstimmen und ihn anzeigen displayName(Schlüssel) {
      let value = this.searchForm[Schlüssel]
      wenn (diese.Auswahloption[Schlüssel]) {
        returniere getTitle(Wert, this.selectionOption[Schlüssel])
      } anders {
        Rückgabewert
      }
    }
  }
}
</Skript>

<Stilbereich>
.queryInfo {
  Rand unten: 10px;
}
</Stil>

<div Klasse="rechts">
  {this.$slots.rightButton}
</div>

// Verwenden Sie <search-table :searchArr="searchArr" @search="search">
  <Vorlage v-slot:rechterButton>
    <el-Schaltfläche 
      Größe="klein" 
      Typ="Erfolg" 
      @click="() => { MessageBox({ message: 'In Entwicklung', Typ: 'Warnung' })}">
      Hinzufügen </el-button>
  </Vorlage> 
</Suchtabelle>
Code kopieren