背景シャトル ボックスが大量のデータを処理すると、レンダリングされる DOM ノードが多すぎるためにページが停止することがあります。 解決遅延読み込み - InfiniteScroll コンポーネントは、最初にパッケージ/転送から元のコンポーネントをコピーします (または、ソース コードを変更して、プライベート ライブラリの使用を維持するために再パッケージ化します) v-infinite-scroll="ページダウン" :infinite-scroll-immediate="false" に追加 <el-チェックボックスグループ v-show="!hasNoMatch && data.length > 0" v-model="チェック済み" :size="サイズ" :class="{ 'is-filterable': フィルタ可能 }" クラス="el-transfer-panel__list" v-infinite-scroll="ページダウン" :infinite-scroll-immediate="false" > <el-チェックボックス クラス="el-transfer-panel__item" :label="item[キープロパティ]" :disabled="アイテム[disabledProp]" :key="アイテム[キープロパティ]" v-for="filteredData 内のアイテム"> <オプションコンテンツ:オプション="項目"></オプションコンテンツ> </el-チェックボックス> </el-チェックボックスグループ> data: 20 で pageSize を定義して、ページあたりのデータ数を示します。showData: [] は表示のみに使用され、上記のコードで操作する実際のデータを置き換えます。filteredData v-for="showData 内の項目"> 同時に、時計の対応する処理 データ(データ){ const チェック = []; this.showData = data.slice(0, this.pageSize); const フィルターデータキー = this.filteredData.map( (アイテム) => アイテム[this.keyProp] ); this.checked.forEach((item) => { if (filteredDataKeys.indexOf(item) > -1) { チェック済み.push(アイテム); } }); this.checkChangeByUser = false; this.checked = チェック済み; }, フィルターされたデータ (フィルターされたデータ) { this.showData = フィルタリングされたデータ.slice(0, this.pageSize); } 初期表示数量はランダムで20個となります。 最後に、一番下までスクロールしたときに呼び出されるメソッドを追加します ページダウン(){ 定数 l = this.showData.length; 定数 totalLength = this.filteredData.length l < 合計長さ && (this.showData = this.filteredData.slice(0, l + this.pageSize > totalLength ? 合計長さ: l + this.pageSize)); }, 下にスクロールすると、表示されるデータの長さが 20 ずつ増加します (数字は任意)。超過すると最大長が表示されます。 これにより、大量のデータを扱う際の操作速度低下の問題が基本的に解決されます。プレゼンテーション層とロジック層が分離されているため、コンポーネントのすべての操作ロジックを変更する必要がなく、差異が最小限に抑えられます。 新しい質問リストの最後まで手動でスクロールしてから検索すると、依然として遅延が発生します。 高度なスクロール処理中は、上部のデータは表示されません。このデータは表示されず、ユーザー エクスペリエンスに影響はありません。 スクロール バーを操作するために、el-checkbox-group に ref=scrollContainer を追加します。 現在のページ番号curIndex: 1をデータに定義します そしてpageDownメソッドを修正する ページダウン(){ 定数 totalLength = this.filteredData.length if((this.curIndex*this.pageSize) < 合計長さ){ this.curIndex++ 定数 targetLength = this.curIndex * this.pageSize const endPoint = targetLength > totalLength ? totalLength : targetLength const startPoint = endPoint - this.pageSize > 0 ? endPoint - this.pageSize : 0 this.showData = this.filteredData.slice(startPoint, endPoint); this.$refs.scrollContainer.$el.scrollTop = "1px" //バーを一番上までスクロールして次のページに接続します。0 は境界の問題を引き起こす可能性があります。} } これを行うには、ページを上にするメソッドも追加する必要があります。 InfiniteScrollコマンドは下方向のスクロールのみを提供します。このコマンドを拡張して、上方向のスクロールリスナーを追加することができます。 this.$refs.scrollContainer.$el.addEventListener('スクロール'、this.pageUp) }, beforeDestroy(){ this.$refs.scrollContainer.$el.removeEventListener('scroll', this.pageUp) }, pageUpメソッドを登録する ページアップ(e){ if(e.target.scrollTop === 0 && this.curIndex> 1){ this.curIndex -- 定数エンドポイント = this.curIndex * this.pageSize 定数 startPoint = (this.curIndex-1)* this.pageSize this.showData = this.filteredData.slice(startPoint, endPoint); const el = this.$refs.scrollContainer.$el el.scrollTop = el.scrollHeight - el.clientHeight - 1 // 一番下までスクロールして前のページに接続します。-1 にすると境界の問題を回避できます。 } }, データ操作を行うと、ページの内容が変わり、それに応じてスクロール バーも変わります。予期しないページめくりを防ぐために、データが変更されると、スクロール バーと現在のページ番号がリセットされます。 initScroll(){ this.curIndex = 1 this.$refs.scrollContainer.$el.scrollTop = 0 }, 同時に、watchの対応する時間にinitScrollを実行します。 データ(){ ... this.initScroll() ... }, フィルターされたデータ (フィルターされたデータ) { ... this.initScroll() } この時点で、大量のデータに対するシャトル フレームのパフォーマンスが大幅に向上しました。 エレメントシャトルボックスのパフォーマンス最適化の実装に関するこの記事はこれで終わりです。エレメントシャトルボックスのパフォーマンス最適化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード
>>: MySQL リンクを表示し、異常なリンクを削除する方法
Dockerコンテナのマウントディレクトリ情報のみを表示する docker 検査 --format ...
目次1. vue-cli デフォルト プロジェクトを作成する (babel のみを含む) 2. 作成...
目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...
CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...
開発中に画像とテキストが 1 行に表示されることはよくあります。2 つのインライン要素を揃えるのは通...
目次序文コンポーネントライブラリの作成主要な構成の変更ディレクトリレイアウトの調整ライブラリ構築のた...
現象: divを一定の振幅で円、楕円などに変更する方法: CSSのborder-radiusプロパテ...
この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...
binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...
目次1. V8ソース2. V8サービスターゲット3. V8の初期アーキテクチャIV. V8の初期アー...
イギリスBFC: ブロック書式設定コンテキストBFCレイアウトルール内箱は縦方向に次々に配置されます...
PHPのメール関数を使用してメールを送信するmail()関数はメールサーバーに接続し、サーバーと対話...
lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...
1. まず、移行サーバー上のデータ ファイルを見つけます。MySQL 5.7 とデフォルトのインスト...
ウェブサイトの場合、ユーザビリティとは、ユーザーが必要な情報を効果的に見つけたり、タスクを完了したり...