JavaScript - データ項目が 500 を超えると iview 選択ルーティングのジャンプが非常に遅くなる

Question

バージョン:
"vue": "^2.2.2"
"iview": "^2.0.0-rc.15"

みなさん、こんにちは。私は現在 iview を使用してバックエンド システムを開発しています。選択コンポーネントのデータ項目が 500 を超えると、ルーティング ジャンプが非常に遅くなるという問題に遭遇しました。遅い場合はジャンプするのに15秒以上かかります。その後、要素 ui を使用してみたところ、ジャンプにも 2 秒ほどかかることがわかりました。

データ量が比較的大きい場合、ジャンプ切り替え時間を短縮するには、Select コンポーネントをどのように処理すればよいですか?

Answer 1

iview和element UIそれはすべて問題です

各オプションはコンポーネントであり、各オプションは複数のイベントにバインドされています。
500 を超えるオプションがあるということは、この Select就有500个以上的组件，每个组件下属的DOM 要素だけが複数のイベントにバインドされていることを意味するため、当然ながらレンダリングは非常に遅くなります。

私は以前にこの問題に遭遇したことがあります。その答えは、Select が iview または element UI を使用しない限り、できることは何もないということです。する。 Select不要用iview或者element UI，否则毫无办法。
我是针对选项太多的Select单独写了个组件，当然样式风格是仿照iview的，毕竟风格要保持一致，但是其内部的业务逻辑和iview Select 用に別のコンポーネントを作成しましたが、これにはオプションが多すぎます。もちろん、スタイルは iview に基づいてモデル化されていますが、その内部的なものは一貫している必要があります。ビジネス ロジックと iview は完全に異なり、対象を絞った最適化が数多く行われています。

Answer 2

データをグループ化してから、連続選択を使用してデータを選択することができます。

Answer 3

もちろん、一度に大量のデータをリクエストすると非常に遅くなります。ページ単位で表示することもできます。

Answer 4

ツリーコンポーネントを使用する場合、4000 個のノードがあり、基本的にそれらをクリックしてロードするように変更する方法はありません。

select コンポーネントは 500 個のノードがあるため、検索値に応じて毎回固定の 50 または 100 が返されるため、バックエンドを追加することを検討してください。論理。