Vue + elementui realisiert Mehrfachauswahl- und Suchfunktionen der Dropdown-Tabelle

<el-form 
:Modell="Datenformular" 
:Regeln="Datenregel" 
ref="Datenformular" 
@keyup.enter.native="dataFormSubmit()"
Beschriftungsbreite = "120px" 
id="Tabelle auswählen" 
@click.native="Nahaufnahme">
<el-Auswahl 
 v-Modell = "dataForm.processDefinitionId" 
 Platzhalter="Bitte auswählen" 
 @change="Handauswahl" 
 ref="Auswählen"
 @click.native="deptogglePanel($event)" 
 mehrere 
 Tags ausblenden 
 Größe="mittel">
  <el-Option 
  v-for="(Element, Index) in Prozessdefinition" 
  :Schlüssel="Index" 
  :label="Artikelname"
  :Wert="Artikel-ID">
  </el-Option>
 </el-Auswahl>
 <div v-if="showTree" Klasse="treeDiv" ref="Tabellenliste">
  <el-input Platzhalter="Suchen" 
  v-Modell="ss" 
  @input="Handeingabe" 
  Größe="mittel">
  </el-Eingabe>
  <el-Tabelle 
  @select="AuswahlKlick handhaben" 
  @row-click="Klick auf Regionsknoten handhaben"
  @selection-change="Änderungshandle" 
  ref="Filmtabelle" :data="Mitgliederliste" Grenze
  :row-key="Reihenschlüssel abrufen" 
  :Zellenstil="GetCellStyle" 
  :header-cell-style="Kopfzellenstil abrufen"
  @select-all="Alles auswählen">
   <el-table-column 
   Typ="Auswahl" 
   Header-Ausrichtung = "Mitte" 
   ausrichten="zentrieren" 
   :reserve-selection="true"
   Breite="50">
   </el-Tabellenspalte>
   <el-table-column 
   v-for="(Element, Index) in Spalten" 
   :Schlüssel="Index" 
   :prop="Artikel.prop"
   :label="Artikel.label" 
   :show-overflow-tooltip="true">
   </el-Tabellenspalte>
 </el-Tabelle>
</div>
</el-form>

<Skript>
 Standard exportieren {
  Daten() {
   zurückkehren {
    ss: '',
    sichtbar: falsch,
    isDisabled: false,
    Datenform: {
     termName: '', //ProjektnameprocessDefinitionId: []

    },
    Datenregel: {
     Prozessdefinitions-ID: [{
      erforderlich: wahr,
      Meldung: 'Bitte wählen Sie die Datei aus',
      Auslöser: „ändern“
     }],
     Begriffsname: [{
      erforderlich: wahr,
      Meldung: „Projektname darf nicht leer sein“,
      Auslöser: ‚Unschärfe‘
     }],
    },
    arr: [],
    processDefinition: [], //Dropdown-Box der Prozessvorlage memberList: [], //Liste
    showTree: falsch,
    Spalten: [{
      Requisite: "Zahl",
      Bezeichnung: „Dateikodierung“
     },
     {
      Requisite: "Name",
      Bezeichnung: 'Dateiname'
     },
     {
      Eigenschaft: 'Typname',
      Bezeichnung: „Vorlagentyp“
     },
     {
      Eigenschaft: "efilename",
      Bezeichnung: „Dateityp“
     },
     {
      Stütze: "Version",
      Bezeichnung: „Version“
     },
    ],
    getRowKeys(Zeile) {
     gibt Zeilen-ID zurück;
    },
    Mehrfachauswahl: [],
    isShowSelect: true
   }
  },
  erstellt() {},
  montiert() {
  },
  betrachten:
   istShowSelect(Wert) {
    // Blende das Dropdown-Feld aus, das mit „select this“ einhergeht.$refs.select.blur();
   },
  },
  Methoden: {
   init() {
    dies.$nextTick(() => {
     dies.$refs['dataForm'].resetFields();
     dies.isDisabled = falsch;
     dies.arr = [];
     diese.Mehrfachauswahl = [];
    }).then(() => {
     //Dropdown-Feld für Archivdateien this.$axios.get("/term/getFileArchiveSelect").then((res) => {
      console.log('Dropdown-Feld für Archivdateien:', res);
      wenn (res.data.code != 200) {
       diese.Mitgliederliste = []
      } anders {
       diese.Prozessdefinition = res.Daten.Seite.Liste
       this.memberList = res.data.page.list // Tabellenzuweisung}
     })
     wenn (!this.dataForm.id) {
      // Neu // this.menuListTreeSetCurrentNode()
     } anders {
      dies.$axios.get("/term/getTermDeatil/" + this.dataForm.id).then((res) => {
       console.log("Projektdetails:", res);
       wenn (res.data.code != 200) {
        // dies.$message.error(res.data.msg)
       } anders {
        lass Daten = res.data.termResVO;
        wenn (data.fileArchiveIds != '') {
         this.dataForm.processDefinitionId = data.fileArchiveIds.split(',')
        } anders {
         this.dataForm.processDefinitionId = []
        }
        diese.Mehrfachauswahl = Daten.Kind;
        dies.rowMultipleChecked(diese.multipleSelection);
       }
      })
     }
    }).catch((Fehler) => {
     konsole.log(Fehler);
    });
   },
   // Tabellen-CSS
   getCellStyle() {
    gibt "Textausrichtung: zentriert" zurück;
   },
   getHeaderCellStyle() {
    returniere "Hintergrund: rgba(9, 37, 56,0.1); Textausrichtung: Mitte; Hintergrund: linearer Farbverlauf (nach unten,#ffffff 0,#eeeeee 100%); Polsterung: 4px 5px;"
   },
   // Klicken Sie auf die Eingabe, um das Aufsteigen zu verhindern und die Anzeige der Tabelle zu steuern bzw. zu verbergen deptogglePanel(event) {
    this.isShowSelect = !this.isShowSelect; //Ursprüngliches Dropdown-Auswahlfeld-Ereignis ausblenden || (Ereignis = Fenster.Ereignis)
    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)
    dies.showTree ? dies.tableHide() : dies.tableShow()
   },
   //Tabelle anzeigen tableShow() {
    this.showTree = wahr
    document.addEventListener('klicken', this.tableHideList, false)
    dies.rowMultipleChecked(diese.multipleSelection);
   },
   //Tabelle ausblenden tableHide() {
    this.showTree = falsch
    document.addEventListener('klicken', this.tableHideList, false)
   },
   tableHideList(e) {
    wenn (diese.$refs.tableList && !diese.$refs.tableList.contains(e.target)) {
     diese.tableHide()
    }
   },
   // Klicken Sie auf den Tabellenknoten handleRegionNodeClick(data) {
    this.showTree = wahr
   },
   //Mehrfachauswahl handleSelectClick(data) {
    this.showTree = wahr
   },
   //Alles auswählen selectAll(data) {
    this.showTree = wahr
   },
   // Auswahl-Änderungstabelle Mehrfachauswahlfeld-Änderungsereignis handleChange(data) {//Ausgewählte Zeile in der Tabelle this.arr = [];
    für (lass i in Daten) {
     dies.arr.push(Daten[i].id)
    }
    this.dataForm.processDefinitionId = this.arr; //Select-Zuweisung this.multipleSelection = data; //Überprüfen und in das Array multipleSelection einfügen},
   //Tabelle Mehrfachauswahlfeld Auswahlbeurteilung rowMultipleChecked(multipleSelection) {
    console.log(Mehrfachauswahl)
    wenn (Mehrfachauswahl != null) {
     für (let j = 0; j < multipleSelection.length; j++) {
      für (lass i = 0; i < this.memberList.length; i++) {
       if (multipleSelection[j].id == this.memberList[i].id) {//Wenn die ID im vom Backend gesendeten Wert vorhanden ist, wählen Sie das Mehrfachauswahlfeld this.$nextTick(() => {//Erforderlich if (this.$refs.moviesTable != undefined) {
          dies.$refs.moviesTable.toggleRowSelection(this.memberList[i], true);
         }
        })
       }
      }
     }
    }
   },
   //Datei löschen handselect(value) {//Select ist mit der Tabelle verknüpft let data = this.multipleSelection;
    sei arr = [];
    if (value.length > 0) {//Lösche den Wert in multipleSelection (alle ausgewählten Werte)
     für (let j = 0; j < data.length; j++) {
      wenn (Wert.Index von (Daten[j].id) == -1) {
       Daten.spleißen(j, 1)
      }
     }
     this.multipleSelection = Daten
    } anders {
     diese.Mehrfachauswahl = [];
     Daten = [];
    }
    für (let s in Daten) {
     arr.push(Daten[s].id)
    }
    if (arr != null) {//Es muss bestimmt werden, für welche Werte die Überprüfung aufgehoben werden muss (let i = 0; i < this.memberList.length; i++) {
      wenn (arr.indexOf(this.memberList[i].id) == -1) {
       dies.$refs.moviesTable.toggleRowSelection(this.memberList[i], false);
      }
     }
    }
   },
   //Suche handinput() {
    konsole.log(diese.ss);
    diese.tableShow()
    dies.$axios.get('/term/getFileArchiveSelect').then((res) => {
     konsole.log(res);
     wenn (res.data.code != 200) {} sonst {
      diese.Prozessdefinition = res.Daten.Seite.Liste
      diese.Mitgliedsliste = res.data.page.list
      console.log(diese.Mitgliederliste)
      let resultData = this.memberList.filter(data => {
       wenn (data.number.indexOf(this.ss) != -1 || data.name.indexOf(this.ss) != -1 ||
        data.typname.indexOf(diese.ss) != -1 || data.version.indexOf(diese.ss) != -
        1 || data.efilename.indexOf(this.ss) != -1) { //Sie können weiterhin Beurteilungsbedingungen hinzufügen return true;
       }
      });
      this.memberList = Ergebnisdaten;
     }
    })
   },
   // Formularübermittlung dataFormSubmit() {
    dies.$refs['dataForm'].validate((gültig) => {
     if (gültig) {
      let url = this.dataForm.id ? '/term/updateTerm' : '/term/addTerm'
      wenn (this.dataForm.id == '') {
       dies.isDisabled = wahr;
      }
      this.dataForm.id = this.dataForm.id || nicht definiert;
      Konsole.log(dieses.Datenformular);
     }
    })
   },
  },
 }
</Skript>

<Stil>
 .applicaWord .el-upload-list__item .el-icon-close-tip {
  Anzeige: keine !wichtig;
 }
 .treeDiv {
  Position: absolut;
  oben: 52px;
  links: -1px;
  Z-Index: 1000;
  Breite: 100 %;
  Überlauf: automatisch;
  maximale Höhe: 280px;
  /* Rahmen: 1px durchgezogen #ccc; */
  Rahmenradius: 6px;
  Hintergrund: #FFFFFF;
 }

 .treeDiv::-webkit-scrollbar {
  /*Allgemeiner Bildlaufleistenstil*/
  Breite: 4px;
  /*Höhe und Breite entsprechen jeweils der Größe der horizontalen und vertikalen Bildlaufleisten*/
  Höhe: 4px;
 }

 .treeDiv::-webkit-scrollbar-thumb {
  /*Kleines Quadrat innerhalb der Bildlaufleiste*/
  Rahmenradius: 5px;
  -webkit-box-shadow: Einschub 0 0 5px rgba(0, 0, 0, 0,2);
  Hintergrund: rgba(0, 0, 0, 0,2);
 }

 .treeDiv::-webkit-scrollbar-track {
  /*Bildlaufleistenspur*/
  -webkit-box-shadow: Einschub 0 0 5px rgba(0, 0, 0, 0,2);
  Randradius: 0;
  Hintergrund: rgba(0, 0, 0, 0,1);
 }

 .treeDiv .el-Tabelle {
  Schriftgröße: 14px;
 }

 .treeDiv .el-table /deep/ td {
  Polsterung: 4px 0;
 }

 #Tabelle auswählen .el-select {
  Breite: 100 %;
 }

 #Tabelle auswählen .el-input {
  Breite: 100 %;
 }

 #kuan .el-form-item__content {
  Breite: 80%;
 }
</Stil>