Eine kurze Diskussion über die Lösung für übermäßige Daten in ElementUI el-select

<el-Auswahl
  v-model="Benutzer-ID"
  filterbar
  :filter-method="BenutzerFilter"
  löschbar>
  <el-Option
    v-for="Element in Benutzerliste"
    :Schlüssel="item.userId"
    :label="item.benutzername"
    :Wert="Artikel.Benutzer-ID"
  ></el-Option>
</el-Auswahl>

BenutzerFilter(Abfrage = '') {
  lass arr = this.allUserList.filter((item) => {
    returniere item.username.includes(Abfrage) || item.userId.includes(Abfrage)
  })
  wenn (arr.length > 50) {
    diese.Benutzerliste = arr.slice(0, 50)
  } anders {
    diese.Benutzerliste = arr
  }
},
getUserWhiteList() {
  HttpRequest.post("/api/admin/community/getUserWhiteList").dann(
    Antwort => {
      diese.allUserList = Antwort.Daten.Liste;
      dies.userFilter()
    }
  );
},

<Vorlage>
    <el-Auswahl
        Klasse="yt-select"
        v-model="aktuellerWert"
        filterbar
        v-bind="$attrs"
        :filter-method="BenutzerFilter"
        :deaktiviert="deaktiviert"
        :löschbar="löschbar"
        @change="ändern"
    >
        <el-Option
            v-for="Option in Renderoption"
            :Schlüssel="Option.Wert"
            :Wert="Option.Wert"
            :label="Option.label"
        >{{ option.label }}</el-option>
    </el-Auswahl>
</Vorlage>

<Skript>

Standard exportieren {
    Name: "easy-select",
    Requisiten: {
        Wert: {
            Typ: [Zeichenfolge, Zahl],
            Standard: ''
        },
        max: {
            Typ: Nummer,
            Standard: 30
        },
        deaktiviert:
            Typ: Boolean,
            Standard: false
        },
        löschbar: {
            Typ: Boolean,
            Standard: true
        },
        Optionen:
            Typ: Array,
            Standard: () => []
        }
    },
    Daten () {
        zurückkehren {
            Renderoption: []
        }
    },
    berechnet: {
        aktuellerWert: {
            erhalten () {
                gib diesen Wert zurück || ''
            },
            setze (Wert) {
                dies.$emit('Eingabe', Wert)
            }
        }
    },
    betrachten:
        Wert () {
            dies.addValueOptions()
        },
        Optionen:
            Handler (V) {
                dies.init()
            },
            tief: wahr
        }
    },
    erstellt () {
        dies.init()
    },
    Methoden: {
        asynchrone Initialisierung () {
            dies.userFilter()
            dies.addValueOptions()
        },
        addValueOptions () {
            wenn (dieser.aktuellerWert) {
                let target = this.options.find((item) => { // Finde das aktuelle Element aus der großen Option return item.value === this.currValue
                })
                if (target) { // Vergleiche das aktuelle Element mit der kleinen Option, wenn nicht, füge hinzu if (this.renderOption.every(item => item.value !== target.value)) {
                        this.renderOption.unshift(Ziel)
                    }
                }
            }
        },
        addFilterOptions (Bezeichnung) {
         // Stellen Sie bei jeder Suche nach einer Eingabe sicher, dass sich das Element in der Renderoption befindet, sofern es eine genaue Übereinstimmung gibt. let target = this.options.find((item) => { // Suchen Sie das aktuelle Element aus der großen Option. return item.label === label
            })
            if (target) { // Vergleiche das aktuelle Element mit der kleinen Option, wenn nicht, füge hinzu if (this.renderOption.every(item => item.label !== target.label)) {
                    this.renderOption.unshift(Ziel)
                }
            }
        },
        BenutzerFilter (Abfrage = '') {
            lass arr = diese.Optionen.Filter((Element) => {
                returniere item.label.includes(Abfrage) || item.value.includes(Abfrage)
            })
            wenn (arr.Länge > this.max) {
                diese.renderOption = arr.slice(0, diese.max)
                this.addFilterOptions(Abfrage)
            } anders {
                diese.renderOption = arr
            }
        },
        ändern (Wert) {
            dies.$emit('ändern', Wert)
            if (!value) { // Einzelauswahl der Löschoptionen initialisiert this.userFilter()
            }
        }
    }
}
</Skript>