背景シャトル ボックスが大量のデータを処理すると、レンダリングされる 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 リンクを表示し、異常なリンクを削除する方法
目次1. シンプルなページの例2.uni-appはvueコンポーネントとミニプログラムネイティブコン...
目次01 コンテナの一貫性02 レイヤーの概念03 レイヤードデザインの利点今日はコンテナ レイヤー...
毎日の統計情報を取得するプロジェクトを実行する際、プロジェクト ログを分析する必要があります。要件の...
この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...
別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...
カウントスクリプト #!/bin/sh 引数の数=$# [ $numOfArgs -ne 1 ]の場...
stat 関数と stat コマンドLinux ファイル内の [inode = インデックス ノード...
基礎リレーショナル データベースでは、各データ テーブルはファイルに相当し、異なるストレージ エンジ...
getElementByIdはオブジェクトを取得できませんブラウザがドキュメントを解析するときにはシ...
目次1. 共有共通モジュール2. 共有マテリアルモジュール3. 共有確認ダイアログ1. 共有共通モジ...
複数の値を組み合わせて表示これで、図1から図2に示す要件が揃いました。 どうやってやるんですか?次の...
目次Linux MySQL 5.5 が MySQL 5.7 にアップグレードされました1. mysq...
1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...
1. sql_modeを確認する @@sql_mode を選択照会された値は次のとおりです。 ON...
MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...