Vue+element はローカル検索機能付きのドロップダウン メニューを実装します

/*
 * @著者: あなたの名前
 * @日付: 2021-09-02 15:46:45
 * @最終編集時間: 2021-09-16 17:39:53
 * @LastEditors: LastEditorsを設定してください
 * @Description: コンソール - データ アクセス - フローティング メニュー* @FilePath: \vue-ui\src\store\module\metadata.js
 */
/**
 * データリソース管理フローティングメニューデータ */

'element-ui' から { Loading, Message } をインポートします
'@/plugins/ajax' から { apiManager } をインポートします。

インスタンスをロードする
定数状態 = {
    全リスト: [],
    ナビリスト: [],
    名前： {}
}
const 変異 = {
    SET_NAVLIST: (状態、リスト) => {
        // ページ検索エラーを防ぐためにディープコピーを使用する state.navList = list.map(item => {
            if (item.children) {
                item.backList = JSON.stringify(item.children)
            }
        })
    },
    SET_ALLLIST: (状態、リスト) => {
        state.allList = リスト
    },
    SET_NAME: (状態、オブジェクト) => {
        オブジェクト.assign(状態.名前, obj)
    }
}
定数アクション = {
    リクエストメタデータ({コミット、状態}、{名前、navList}) {
        新しいPromiseを返します(resolve => {
            const nameKey = Object.keys(state.name)
            nameKey.indexOf(name) !== -1 の場合 {
                //重複リクエストを防ぐresolve(state.name[name])
            } それ以外 {
                loadingInstance = Loading.service()
                state.name[名前] = 名前
                apiマネージャー
                    .post('/metadata/tableInfo/query')
                    .then(res => {
                        コミット('SET_ALLLIST', res.data)
                        (res.data内のconst i) {
                            const item = navList.find(v => v.name === i) //渡された名前と返されたキー(name)を一致させて、if (item) {
                                item.children = res.data[i] // 要求された各オブジェクトの下の配列を対応するItem.childrenに戻します。item.navSearch = ''
                                item.backList = [] //検索中に元の配列が変更されないようにバックアップを作成します}
                        }
                        コミット('SET_NAVLIST', navList)
                        コミット('SET_NAME', { [name]: navList })
                        解決(navList)
                        ロードインスタンスを閉じる()
                    })
                    .catch(エラー => {
                        解決する（[]）
                        ロードインスタンスを閉じる()
                        メッセージ.エラー(err)
                    })
            }
        })
    }
}

エクスポートデフォルト{
    名前空間: true、
    州、
    突然変異、
    アクション
}

 <transition name="コンポーネントフェード" mode="アウトイン">
   <フローティングメニュー v-show="isCollapse" :newList='navList' @getDatails='getDatails' />
</トランジション>

データ（） {
      戻る {
          ナビリスト: [
              {
                  画像ソース: require('./../../../../../public/images/m6.png'),
                  名前: 'ftp',
                  タイプ名: 'FTP サーバー',
                  子供たち： []、
                  合計: 0
              },
              {
                  画像ソース: require('./../../../../../public/images/m5.png'),
                  名前: 'txt',
                  タイプ名: 'ファイルサーバー',
                  子供たち： []、
                  合計: 0
              }
          ]、
          
   },
  非同期マウント() {
    定数パラメータ = {
        名前: 'fileXs',
        navList: this.navList
    }
    // vuex をリクエストする
    this.navlist = this.$store.dispatch('metadata/requestMetadata', param) を待機します
},

<!--
 * @著者: あなたの名前
 * @日付: 2021-09-02 14:01:58
 * @最終編集時間: 2021-09-16 17:43:10
 * @LastEditors: LastEditorsを設定してください
 * @Description: データ リソース テーブル内のフローティング メニュー* @FilePath: \vue-ui\src\views\console\dataAccessManage\components\floatingMenu.vue
-->
<テンプレート>
    <div class="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 class="item_name sjk_name" :class="{ sjk_active: sjkActive == index }" @click="sjktcShow(item.type,index)">{{item.typeName}}</div>
            </div>
        </div>
        <!-- ファイル -->
        <el-collapse class="nav__item" v-model="activeNames">
            <el-collapse-item class="item_name" :title="item.typeName" :name="item.typeName" v-for="(item,index) in newList" :key="index">
                <ul class="nav__item__list">
                    <li class="list__li">
                        <el-input v-input-val-bg v-model="item.navSearch" @input="handleNavSearch(item)" prefix-icon="el-icon-search" size="mini" placeholder="キーワードを入力してください" clearable></el-input>
                    </li>
                    <li v-for="(key,i) in item.children" :key="i" :class="{ 'list__li--active': key.id == dbId }" class="list__li" @click="getDatails(key,item)">
                        <span :title="キー名" class="list--title">{{キー名}}</span>
                        <span class="list--count">{{key.total || 0}}</span>
                    </li>
                    <li class="no-data" v-if="!item.children.length">データなし</li>
                </ul>
            </el-collapse-item>
        </el-collapse>
    </div>
</テンプレート>
<スクリプト>
'@/utils' から { debounce } をインポートします
エクスポートデフォルト{
    名前: 'フローティングメニュー',
    小道具: {
        sjktcリスト: {
            タイプ: 配列、
            デフォルト: () => []
        },
        新しいリスト: {
            タイプ: 配列、
            デフォルト: () => []
        }
    },
    コンポーネント: {},
    データ（） {
        戻る {
            sjkアクティブ: 0,
            nav検索: '',
            navChildData: [],
            データベースID: ''、
            アクティブ名: []
        }
    },
    マウント() {
    },
    メソッド: {
        // リスト内のコンテンツをクリックする getDatails(args, db) {
            this.dbId = args.id
            this.$emit('getDatails', { args, db })
        },
        // eslint は関数の括弧の前に次の行のスペースを無効にします
        handleNavSearch:debounce(関数(obj) {
            this.$forceUpdate()//入力ボックスの割り当て失敗を防ぐ const currlist = JSON.parse(obj.backList)
            obj.navSearch == ''の場合{
                obj.children = カレントリスト
            } それ以外 {
                obj.children = currlist.filter(item => {
                    item.name.toLowerCase().indexOf(obj.navSearch.toLowerCase()) != -1 を返します
                })
            }
        }, 100),
        sjktcShow(タイプ、i) {
            this.sjkアクティブ = i
            this.$emit('sjktcShow', [タイプ])
        }
    },
    時計：
        新しいリスト: {
            深い：本当、
            ハンドラ(リスト) {
                if (リスト) {
                    // デフォルトでは、展開されたリストの下の 0 個のメニューがアクティブになります for (let i = 0; i < list.length; i++) {
                        const 項目 = リスト[i]
                        if (!this.dbId && item.children.length) {
                            this.activeNames = アイテム.typeName
                            this.getDatails(item.children[0], item) //最初のデータコンテンツのデフォルトリクエスト}
                    }
                }
            }
        }
    }
}
</スクリプト>
<style lang='scss' スコープ>
.data-sheet-main__nav {
    幅: 180ピクセル;
    位置: 絶対;
    上: 0px;
    左: -190px;
    zインデックス: 100;
    背景: #fff;
    境界線: 1px 実線 #6579fe;
    パディング上部: 10px;
    .sjk_アクティブ{
        色: $theme !important;
    }
    .nav__item {
        位置: 相対的;
        下部マージン: 15px;

        .アイテム名 {
            幅: 100%;
            表示: インラインブロック;
            左パディング: 17px;
            フォントサイズ: 14px;
            行の高さ: 24px;
            色: rgba(0, 0, 0, 0.85);
            /deep/.el-collapse-item__header {
                フォントの太さ: 太字;
                下部境界線: なし;
                位置: 相対的;
                左パディング: 15px;
                .el-collapse-item__arrow {
                    位置: 絶対;
                    左: 0;
                    変換: 回転(270度);
                }
                .el-collapse-item__arrow.is-active {
                    変換: 回転(90度);
                }
            }

            &:ホバー{
                カーソル: ポインタ;
            }
        }
        .データなし{
            テキスト配置: 中央;
            色: #999;
            パディング: 10px 0;
            幅: 100%;
        }
        画像 {
            幅: 100%;
            高さ: 50px;
        }
        .nav__item--合計 {
            位置: 絶対;
            表示: ブロック;
            幅: 30ピクセル;
            高さ: 30px;
            背景: #fff;
            境界線: 1px 実線 #ccc;
            境界線の半径: 50%;
            行の高さ: 30px;
            境界線: 1px実線 #71b1ec;
            ボックスの影: 0 3px 6px #156d90;
            テキスト配置: 中央;
            色: #fd0b0b;
            フォントサイズ: 16px; /*いいえ*/
            上: 0;
            右: 0;
            変換: translate(25%, -20%);
        }
        .nav__item__list {
            ディスプレイ: フレックス;
            最大高さ: 246px;
            オーバーフロー-y: 自動;
            flex-wrap: ラップ;

            .list__li {
                幅: 100%;
                上マージン: 5px;
                行の高さ: 30px;
                パディング: 0 6px 0 17px;
                位置: 相対的;
                カーソル: ポインタ;
                色: #333;
                &:ホバー{
                    色: $blue;
                }
                .list--タイトル{
                    幅: 90ピクセル;
                    オーバーフロー: 非表示;
                    テキストオーバーフロー: 省略記号;
                    空白: ラップなし;
                    フロート: 左;
                    &:ホバー{
                        色: #409eff;
                    }
                }
                .list--count {
                    色: #46a0fc;
                    フロート: 右;
                }
            }
            .list__li--アクティブ{
                色: $blue;
            }
        }
    }
    /deep/.el-collapse {
        上境界線: なし;
    }
}
.データシートメイン__リスト {
    フレックス: 1;
    左マージン: 20px;
    .リストヘッダー{
        flex-direction: 列;

        。注文 {
            テキスト配置: 右;
            {
                背景: #6579fe;
                フォントファミリ: PingFangSC-Regular;
                フォントサイズ: 12px;
                行の高さ: 22px;
                色: #ffffff;
                パディング: 6px;
                境界線の半径: 4px;
            }
        }
    }
    .handler--右固定 {
        パディング: 25px 10px;
    }
    .nodata {
        テキスト配置: 中央;
        フォントサイズ: 16px;
    }
}
</スタイル>