ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

ElementUI el-select の過剰なデータに対する解決策についての簡単な説明

1. シナリオの説明

これまでにこのような経験をしたことがあるかどうかはわかりません。ドロップダウン ボックスには多くのオプションがあり、数万、あるいはそれ以上のオプションがあります。このとき、すべてのデータをドロップダウン ボックスに入れてレンダリングすると、ブラウザーがフリーズし、エクスペリエンスが特に悪くなります。

element-ui の select にはリモート検索をサポートするリモートメソッドがあると言うユーザーもいるかもしれません。サーバーにそれをサポートするように依頼するだけではだめでしょうか? もちろん、これは解決策です。しかし、この方法は適用できない場合もあります

(1) サーバー側のデータが計算後に返されることがあり、その戻りがあまり速くない場合があるため、エクスペリエンスはあまり良くありません。 (2) データが数千個しかない場合があり、すべてをレンダリングするのは適切ではありません。インターフェイスを低く保つのはあまり良くありません。 (3) フロントエンドだけで解決できますか? 解決できれば、サーバーの作業と負荷が軽減されるのではないでしょうか?

2. 解決策

1) セグメント化された読み込み: ドロップダウン項目は読み込まれません。ドロップダウン ボックスをクリックすると、読み込まれます。この時点で、すべてのオプションが読み込まれます。この状況は、読み込みが遅い場合にのみ当てはまります。オプションをドロップダウンする前に、クリックして読み込む必要があります。エクスペリエンスは平均的です。
2) ヒント: element-uiのselectにはfilter-methodメソッドがあり、これを使ってドロップダウン項目をフィルタリングすることができます。ユーザーを選択するためのドロップダウンボックスがあるとします。

<el-選択
  v-model="ユーザーID"
  フィルター可能
  :filter-method="ユーザーフィルター"
  クリア可能>
  <el-オプション
    v-for="userList 内の項目"
    :key="item.userId"
    :label="item.ユーザー名"
    :value="item.userId"
  </el-option>
</el-select>
ユーザーフィルター(クエリ = '') {
  arr = this.allUserList.filter((item) => { とします。
    item.username.includes(クエリ) || item.userId.includes(クエリ) を返します
  })
  (arr.length > 50)の場合{
    this.userList = arr.slice(0, 50)
  } それ以外 {
    this.userList = arr
  }
},
getUserWhiteList() {
  HttpRequest.post("/api/admin/community/getUserWhiteList").then(
    レスポンス => {
      this.allUserList = 応答データリスト;
      this.userFilter()
    }
  );
},

上記のように、バックグラウンドからユーザー リストを取得します。独自のフィルタリングを行った後、一度にレンダリングされるデータは 50 個のみです。データの量に関係なく、変数がサポートされ、メモリが消費されます。もちろん、データが増えるほど配列の走査は遅くなりますが、影響はほとんどありません。
名前をフィルタリングするだけでなく、設定した項目を最適化することもできます。上記のコードも適切に最適化できます。配列の長さが 50 項目を超えた場合にのみ、トラバースを停止します。

オプションが多すぎる el-select コンポーネントの解決策

ビジネスシナリオ

el-select コンポーネントを使用する場合、オプションが多すぎると、次のようなデメリットが生じます。

このページでは、多数の el-option ノードがレンダリングされるため、ページがフリーズしたり、フリーズしたりして、ユーザー エクスペリエンスが非常に低下します。
選択できるアイテムが多すぎて、見つけるのが困難です。

今回遭遇したシナリオは、選択肢の数が6~9千個という状況でした。

解決

ページレンダリングの全体オプションから固定項目の小さなオプション(renderOption)を取り出し、
filter-method メソッドは検索フィルタリングを実行し、検索中にフィルタ結果で renderOption を更新します。

コード実装以下はVueのコンポーネントカプセル化です

<テンプレート>
    <el-選択
        クラス="yt-select"
        v-model="currValue"
        フィルター可能
        v-bind="$attrs"
        :filter-method="ユーザーフィルター"
        :disabled="無効"
        :clearable="クリア可能"
        @change="変更"
    >
        <el-オプション
            v-for="renderOption 内のオプション"
            :key="オプション.値"
            :value="オプションの値"
            :label="オプション.ラベル"
        >{{ オプション.ラベル }}</el-option>
    </el-select>
</テンプレート>

<スクリプト>

エクスポートデフォルト{
    名前: 'easy-select',
    小道具: {
        価値: {
            タイプ: [文字列、数値],
            デフォルト: ''
        },
        最大: {
            タイプ: 数値、
            デフォルト: 30
        },
        無効:
            タイプ: ブール値、
            デフォルト: false
        },
        クリア可能: {
            タイプ: ブール値、
            デフォルト: true
        },
        オプション:
            タイプ: 配列、
            デフォルト: () => []
        }
    },
    データ () {
        戻る {
            レンダリングオプション: []
        }
    },
    計算: {
        通貨値: {
            得る () {
                this.value を返します || ''
            },
            設定(値) {
                this.$emit('入力', 値)
            }
        }
    },
    時計:
        価値 () {
            this.addValueOptions()
        },
        オプション:
            ハンドラー(V){
                この.init()
            },
            深い: 本当
        }
    },
    作成された(){
        この.init()
    },
    メソッド: {
        非同期初期化(){
            this.userFilter()
            this.addValueOptions()
        },
        値オプションを追加します () {
            if (this.currValue) {
                let target = this.options.find((item) => { // 大きなオプションから現在の項目を検索します return item.value === this.currValue
                })
                if (target) { // 現在のアイテムを小さいオプションと比較し、そうでない場合は追加します if (this.renderOption.every(item => item.value !== target.value)) {
                        this.renderOption.unshift(ターゲット)
                    }
                }
            }
        },
        addFilterOptions (ラベル) {
         // 入力を検索するたびに、完全一致がある場合は、アイテムが renderOption にあることを確認します。let target = this.options.find((item) => { // 大きなオプションから現在のアイテムを検索します。return item.label === label
            })
            if (target) { // 現在のアイテムを小さいオプションと比較し、そうでない場合は追加します if (this.renderOption.every(item => item.label !== target.label)) {
                    this.renderOption.unshift(ターゲット)
                }
            }
        },
        ユーザーフィルター (クエリ = '') {
            arr = this.options.filter((item) => { とします。
                item.label.includes(クエリ) || item.value.includes(クエリ) を返します
            })
            (arr.length>this.max)の場合{
                this.renderOption = arr.slice(0, this.max)
                this.addFilterOptions(クエリ)
            } それ以外 {
                this.renderOption = arr
            }
        },
        変更(値){
            this.$emit('change', 値)
            if (!value) { // 単一選択のクリアオプションを初期化します this.userFilter()
            }
        }
    }
}
</スクリプト>

予防

  • 値を初期化して変更するときは、値に対応する特定の項目を見つけてrenderOptionsに追加する必要があります。
  • 検索時に、フィルタリングされた n 個のデータ項目のいずれにも、ユーザーが探している特定の項目が含まれていない可能性があります。そのため、フィルタリング時には正確な検索が必要であり、一致する項目が renderOptions ヘッダーに配置されます。

ElementUI el-select のデータ量が多すぎる問題の解決方法についての記事はこれで終わりです。ElementUI el-select のデータ量が多すぎる問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue elementUI が el-select を使用するときに変更イベントがトリガーされる問題を解決する
  • element-ui のドロップダウン複数選択ボックス el-select を使用するときにデフォルト値を削除できない問題を解決します。
  • Vue + Element-ui のドロップダウンボックス el-select の追加パラメータを取得する詳細な説明
  • Element-ui リモート検索コンポーネント el-select コンポーネント化された実装コードをプロジェクト内
  • element-ui の el-select のデフォルト選択の問題の詳細な説明
  • vue2.0 element-ui の el-select セレクターは選択されたコンテンツを表示できません (解決策)

<<:  Ubuntu 20.04にROS Noeticをインストールする方法

>>:  操作タイムアウトがないときにMySQLサーバーがアクティブに切断される問題を解決します

推薦する

MySQL のインデックスの原理とクエリの最適化の詳細な説明

目次1. はじめに1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 2...

Vue-cliに基づくコードセットは複数のプロジェクトをサポートします

目次アプリケーションシナリオアイデアプロジェクト構造全体的なプロジェクト構造webpack パッケー...

react+reduxを使用してカウンター機能を実装すると発生する問題

Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...

Server-U 14バージョンのインストールと使用方法

Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...

deepin apt コマンドを使用して最新バージョンの docker をインストールする方法

ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...

VMwareがwin10ホームバージョンに64ビットオペレーティングシステムをインストールできない問題を解決します

問題の説明VMware Workstationが新しい仮想マシンを作成し、64ビットオペレーティング...

MySQLのダウンロードとインストールのプロセスの詳細な説明

1: MySqlをダウンロードする公式サイトのダウンロードアドレス: https://dev.mys...

CentOS システムでの JDK のインストールと設定の概要

目次序文OpenJDKの確認とアンインストールダウンロードした圧縮パッケージを使用してJDKをインス...

ウェブテーブルフレームを作成するためのヒント

<br />Web テーブル フレームを作成するためのヒント。 ------------...

CSS3 と JavaScript を使用して Web カラー ピッカーのサンプル コードを開発する

この例の Web カラー ピッカー機能は、ページ効果を実現するために CSS3 を使用します。つまり...

サーバーから返される14の一般的なHTTPステータスコードの詳細な説明

HTTP ステータス コードステータス コードは 3 桁の数字と理由フレーズ (最も一般的なもの: ...

Linux で xargs コマンドを使用する詳細なチュートリアル

みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...

Linuxファイルコマンドの使用

1. コマンドの紹介ファイル コマンドは、ファイルの種類を識別するために使用されます。ファイル チェ...

MySQL でのトランザクションの使用方法

基礎トランザクションは、SQL ステートメントのグループに対するアトミック操作です。つまり、グループ...

ウェブページの表の分割線を削除する方法

<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...