Vue+Element implementiert Dropdown-Menü mit lokaler Suchfunktion – Beispiel

/*
 * @Autor: Ihr Name
 * @Datum: 2021-09-02 15:46:45
 * @LastEditTime: 2021-09-16 17:39:53
 * @LastEditors: Bitte LastEditors festlegen
 * @Description: Konsole-Datenzugriff-Floating-Menü* @FilePath: \vue-ui\src\store\module\metadata.js
 */
/**
 * Floating-Menüdaten zur Datenressourcenverwaltung */

importiere { Wird geladen, Nachricht } von 'element-ui'
importiere { apiManager } von '@/plugins/ajax'

let wird geladenInstance
konstanter Zustand = {
    alleListe: [],
    Navigationsliste: [],
    Name: {}
}
const Mutationen = {
    SET_NAVLIST: (Status, Liste) => {
        // Verwenden Sie Deep Copy, um Seitensuchfehler zu vermeiden state.navList = list.map(item => {
            wenn (Element.Kinder) {
                Element.backList = JSON.stringify(Element.Kinder)
            }
        })
    },
    SET_ALLLIST: (Status, Liste) => {
        Zustand.allList = Liste
    },
    SET_NAME: (Status, Objekt) => {
        Objekt.zuweisen(Status.Name, Objekt)
    }
}
const Aktionen = {
    requestMetadata({ commit, status }, { name, navList }) {
        gib ein neues Versprechen zurück (Auflösen => {
            const nameKey = Objekt.keys(Status.name)
            wenn (nameKey.indexOf(name) !== -1) {
                //Doppelte Anfragen verhindern resolve(state.name[name])
            } anders {
                loadingInstance = Wird geladen.service()
                Staat.Name[Name] = Name
                API-Manager
                    .post('/metadata/tableInfo/query')
                    .then(res => {
                        commit('SET_ALLLIST', res.data)
                        für (const i in res.data) {
                            const item = navList.find(v => v.name === i) //Gleiche den übergebenen Namen mit dem zurückgegebenen Schlüssel (Name) ab und füge ihn in if (item) { ein.
                                item.children = res.data[i] //Setze das Array unter jedem angeforderten Objekt zurück in das entsprechende Item.children item.navSearch = ''
                                item.backList = [] //Erstelle ein Backup, um Änderungen am Original-Array während der Suche zu verhindern}
                        }
                        commit('SET_NAVLIST', Navigationsliste)
                        commit('SET_NAME', { [name]: navList })
                        auflösen(navList)
                        wird geladenInstance.schließen()
                    })
                    .catch(err => {
                        lösen([])
                        wird geladenInstance.schließen()
                        Nachricht.Fehler(err)
                    })
            }
        })
    }
}

Standard exportieren {
    Namespace: wahr,
    Zustand,
    Mutationen,
    Aktionen
}

 <Übergangsname="Komponenten-Fade" Modus="Aus-Ein">
   <floating-menu v-show="isCollapse" :newList='navList' @getDatails='getDatails' />
</Übergang>

Daten() {
      zurückkehren {
          Navigationsliste: [
              {
                  imgSrc: erfordern('./../../../../../public/images/m6.png'),
                  Name: "ftp",
                  Typname: 'FTP-Server',
                  Kinder: [],
                  gesamt: 0
              },
              {
                  imgSrc: erfordern('./../../../../../public/images/m5.png'),
                  Name: "txt",
                  Typname: 'Dateiserver',
                  Kinder: [],
                  gesamt: 0
              }
          ],
          
   },
  asynchron gemountet() {
    konstanter Parameter = {
        Name: "fileXs",
        navList: diese.navList
    }
    // Vuex anfordern
    this.navlist = warte auf this.$store.dispatch('metadata/requestMetadata', param)
},

<!--
 * @Autor: Ihr Name
 * @Datum: 2021-09-02 14:01:58
 * @LastEditTime: 2021-09-16 17:43:10
 * @LastEditors: Bitte LastEditors festlegen
 * @Description: Schwebendes Menü in der Datenressourcentabelle* @FilePath: \vue-ui\src\views\console\dataAccessManage\components\floatingMenu.vue
-->
<Vorlage>
    <div Klasse="data-sheet-main__nav" v-if="sjktcList.length || newList.length">
        <div>
            <div class="nav__item" v-for="(item,index) in sjktcList" :key="'info2-' + index">
                <div Klasse = "item_name sjk_name" :Klasse = "{ sjk_active: sjkActive == index }" @click = "sjktcShow(item.type,index)">{{item.typeName}}</div>
            </div>
        </div>
        <!-- Datei -->
        <el-collapse class="nav__item" v-model="activeNames">
            <el-collapse-item class="item_name" :title="item.typName" :name="item.typName" v-for="(item,index) in newList" :key="index">
                <ul Klasse="nav__item__list">
                    <li Klasse="Liste__li">
                        <el-input v-input-val-bg v-model="item.navSearch" @input="handleNavSearch(item)" prefix-icon="el-icon-search" size="mini" placeholder="Bitte geben Sie Schlüsselwörter ein" löschbar></el-input>
                    </li>
                    <li v-for="(Schlüssel,i) in Element.Kinder" :Schlüssel="i" :Klasse="{ 'list__li--active': Schlüssel.id == dbId }" Klasse="list__li" @click="getDatails(Schlüssel,Element)">
                        <span :title="Schlüssel.name" class="list--title">{{Schlüssel.name}}</span>
                        <span class="list--count">{{key.total || 0}}</span>
                    </li>
                    <li class="no-data" v-if="!item.children.length">Keine Daten</li>
                </ul>
            </el-collapse-item>
        </el-collapse>
    </div>
</Vorlage>
<Skript>
importiere { Entprellung } von '@/utils'
Standard exportieren {
    Name: "schwebendesMenü",
    Requisiten: {
        sjktcListe: {
            Typ: Array,
            Standard: () => []
        },
        neueListe: {
            Typ: Array,
            Standard: () => []
        }
    },
    Komponenten: {},
    Daten() {
        zurückkehren {
            sjkAktiv: 0,
            navSearch: '',
            navChildData: [],
            dbId: '',
            aktiveNamen: []
        }
    },
    montiert() {
    },
    Methoden: {
        // Klicken Sie auf den Inhalt in der Liste getDatails(args, db) {
            diese.dbId = args.id
            dies.$emit('getDatails', { args, db })
        },
        // eslint-disable-next-line-Leerzeichen-vor-Funktionsklammer
        handleNavSearch:Entprellung(Funktion (Objekt) {
            this.$forceUpdate()//Fehler bei der Zuweisung von Eingabefeldern verhindern const currlist = JSON.parse(obj.backList)
            wenn (obj.navSearch == '') {
                obj.children = currlist
            } anders {
                obj.children = currlist.filter(item => {
                    returniere item.name.toLowerCase().indexOf(obj.navSearch.toLowerCase()) != -1
                })
            }
        }, 100),
        sjktcShow(Typ, i) {
            dies.sjkActive = i
            dies.$emit('sjktcShow', [Typ])
        }
    },
    betrachten:
        neueListe: {
            tief: wahr,
            handler(Liste) {
                wenn (Liste) {
                    // Standardmäßig werden die 0 Menüs unter der erweiterten Liste aktiviert für (let i = 0; i < list.length; i++) {
                        const Element = Liste[i]
                        wenn (!this.dbId && item.children.length) {
                            this.activeNames = Artikel.TypName
                            this.getDatails(item.children[0], item) //Standardabfrage für den ersten Dateninhalt}
                    }
                }
            }
        }
    }
}
</Skript>
<style lang='scss' scoped>
.Datenblatt-Hauptnavigation {
    Breite: 180px;
    Position: absolut;
    oben: 0px;
    links: -190px;
    Z-Index: 100;
    Hintergrund: #fff;
    Rand: 1px durchgezogen #6579fe;
    Polsterung oben: 10px;
    .sjk_active {
        Farbe: $theme !wichtig;
    }
    .nav__item {
        Position: relativ;
        Rand unten: 15px;

        .Artikelname {
            Breite: 100 %;
            Anzeige: Inline-Block;
            Polsterung links: 17px;
            Schriftgröße: 14px;
            Zeilenhöhe: 24px;
            Farbe: rgba(0, 0, 0, 0,85);
            /deep/.el-collapse-item__header {
                Schriftstärke: fett;
                Rahmen unten: keiner;
                Position: relativ;
                Polsterung links: 15px;
                .el-collapse-item__arrow {
                    Position: absolut;
                    links: 0;
                    transformieren: drehen (270 Grad);
                }
                .el-collapse-item__arrow.ist-aktiv {
                    transformieren: drehen (90 Grad);
                }
            }

            &:schweben {
                Cursor: Zeiger;
            }
        }
        .keine-Daten {
            Textausrichtung: zentriert;
            Farbe: #999;
            Polsterung: 10px 0;
            Breite: 100 %;
        }
        img {
            Breite: 100 %;
            Höhe: 50px;
        }
        .nav__item--total {
            Position: absolut;
            Anzeige: Block;
            Breite: 30px;
            Höhe: 30px;
            Hintergrund: #fff;
            Rand: 1px durchgezogen #ccc;
            Randradius: 50 %;
            Zeilenhöhe: 30px;
            Rand: 1px durchgezogen #71b1ec;
            Kastenschatten: 0 3px 6px #156d90;
            Textausrichtung: zentriert;
            Farbe: #fd0b0b;
            Schriftgröße: 16px; /*nein*/
            oben: 0;
            rechts: 0;
            transformieren: übersetzen(25 %, -20 %);
        }
        .nav__item__list {
            Anzeige: Flex;
            maximale Höhe: 246px;
            Überlauf-y: automatisch;
            Flex-Wrap: Umwickeln;

            .list__li {
                Breite: 100 %;
                Rand oben: 5px;
                Zeilenhöhe: 30px;
                Polsterung: 0,6px, 0,17px;
                Position: relativ;
                Cursor: Zeiger;
                Farbe: #333;
                &:schweben {
                    Farbe: $blau;
                }
                .list--title {
                    Breite: 90px;
                    Überlauf: versteckt;
                    Textüberlauf: Auslassungspunkte;
                    Leerzeichen: Nowrap;
                    schweben: links;
                    &:schweben {
                        Farbe: #409eff;
                    }
                }
                .Liste--Anzahl {
                    Farbe: #46a0fc;
                    schweben: rechts;
                }
            }
            .list__li--aktiv {
                Farbe: $blau;
            }
        }
    }
    /deep/.el-collapse {
        oberer Rand: keiner;
    }
}
.Datenblatt-Hauptliste {
    biegen: 1;
    Rand links: 20px;
    .Listenkopfzeile {
        Flex-Richtung: Spalte;

        .Befehl {
            Textausrichtung: rechts;
            A {
                Hintergrund: #6579fe;
                Schriftfamilie: PingFangSC-Regular;
                Schriftgröße: 12px;
                Zeilenhöhe: 22px;
                Farbe: #ffffff;
                Polsterung: 6px;
                Rahmenradius: 4px;
            }
        }
    }
    .handler--fixed-right {
        Polsterung: 25px 10px;
    }
    .keine Daten {
        Textausrichtung: zentriert;
        Schriftgröße: 16px;
    }
}
</Stil>