1. シナリオの説明これまでにこのような経験をしたことがあるかどうかはわかりません。ドロップダウン ボックスには多くのオプションがあり、数万、あるいはそれ以上のオプションがあります。このとき、すべてのデータをドロップダウン ボックスに入れてレンダリングすると、ブラウザーがフリーズし、エクスペリエンスが特に悪くなります。 element-ui の select にはリモート検索をサポートするリモートメソッドがあると言うユーザーもいるかもしれません。サーバーにそれをサポートするように依頼するだけではだめでしょうか? もちろん、これは解決策です。しかし、この方法は適用できない場合もあります (1) サーバー側のデータが計算後に返されることがあり、その戻りがあまり速くない場合があるため、エクスペリエンスはあまり良くありません。 (2) データが数千個しかない場合があり、すべてをレンダリングするのは適切ではありません。インターフェイスを低く保つのはあまり良くありません。 (3) フロントエンドだけで解決できますか? 解決できれば、サーバーの作業と負荷が軽減されるのではないでしょうか? 2. 解決策1) セグメント化された読み込み: ドロップダウン項目は読み込まれません。ドロップダウン ボックスをクリックすると、読み込まれます。この時点で、すべてのオプションが読み込まれます。この状況は、読み込みが遅い場合にのみ当てはまります。オプションをドロップダウンする前に、クリックして読み込む必要があります。エクスペリエンスは平均的です。 <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 個のみです。データの量に関係なく、変数がサポートされ、メモリが消費されます。もちろん、データが増えるほど配列の走査は遅くなりますが、影響はほとんどありません。 オプションが多すぎる el-select コンポーネントの解決策ビジネスシナリオel-select コンポーネントを使用する場合、オプションが多すぎると、次のようなデメリットが生じます。 このページでは、多数の el-option ノードがレンダリングされるため、ページがフリーズしたり、フリーズしたりして、ユーザー エクスペリエンスが非常に低下します。 今回遭遇したシナリオは、選択肢の数が6~9千個という状況でした。 解決ページレンダリングの全体オプションから固定項目の小さなオプション(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() } } } } </スクリプト> 予防
ElementUI el-select のデータ量が多すぎる問題の解決方法についての記事はこれで終わりです。ElementUI el-select のデータ量が多すぎる問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu 20.04にROS Noeticをインストールする方法
>>: 操作タイムアウトがないときにMySQLサーバーがアクティブに切断される問題を解決します
目次1. はじめに1. インデックスとは何ですか? 2. インデックスはなぜ必要なのでしょうか? 2...
目次アプリケーションシナリオアイデアプロジェクト構造全体的なプロジェクト構造webpack パッケー...
Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...
Server-Uソフトウェアの紹介Server-U は非常に強力なファイル マネージャーです。FTP...
ステップ1: Ubuntuソースを追加するルートに切り替える suルートソフトウェアソースファイルの...
問題の説明VMware Workstationが新しい仮想マシンを作成し、64ビットオペレーティング...
1: MySqlをダウンロードする公式サイトのダウンロードアドレス: https://dev.mys...
目次序文OpenJDKの確認とアンインストールダウンロードした圧縮パッケージを使用してJDKをインス...
<br />Web テーブル フレームを作成するためのヒント。 ------------...
この例の Web カラー ピッカー機能は、ページ効果を実現するために CSS3 を使用します。つまり...
HTTP ステータス コードステータス コードは 3 桁の数字と理由フレーズ (最も一般的なもの: ...
みなさんこんにちは。私は梁旭です。 Linux を使用しているときに、いくつかのコマンドを連結する必...
1. コマンドの紹介ファイル コマンドは、ファイルの種類を識別するために使用されます。ファイル チェ...
基礎トランザクションは、SQL ステートメントのグループに対するアトミック操作です。つまり、グループ...
<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...