成果を達成するコードクラウドアドレス 転がり荷重知識備蓄ant-design-vue のリストスクロール読み込みのアイデアを参考にして、解決策として vue-infinite-scroll と vue-virtual-scroller を使用します。 コンポーネントのパッケージシステム全体で使用されるフレームワークは ant-dsign-vue であるため、コンポーネントのカプセル化の変数命名スタイルは a-table と可能な限り一貫しています。 1. コンポーネントの命名XScrollTable.vue 2. 小道具は用意します必須フィールド: dataSource -- データ ソース 列 - テーブルに表示される列情報。スロットの使用法は、以下で説明する a-table とまったく同じではありません。 itemSize -- データの各行の高さ オプションフィールド: rowKey -- データの主キー識別子、デフォルトは「key」 高さ - テーブル表示領域の高さ。デフォルトは 500 です。 pageSize - テーブルをスクロールするたびに読み込まれるデータの量。デフォルトは30です。 infiniteScrollDistance -- テーブルの読み込みをトリガーするための距離条件。デフォルト値は 10 です。 rowSelection -- テーブルの複数選択構成。処理される属性は selectedRowKeys、onChange、width です。デフォルトは null であり、複数の選択は表示されません。 3. 使用例まず、10,000 個のデータを初期化し、テーブルに表示します。 データ = new Array(10000).fill(1); データ = data.map((item1, インデックス) => { 項目を {} とします。 アイテムID = インデックス; item.age = "名前"; item.address = "住所"; 返品商品; }); デフォルトデータをエクスポートします。 注: Array コンストラクターによって生成されたデータがすべて空であり、配列インデックスがなく、マップ ループを実行できないため、ここで fill(1) が追加されます。 テーブルをロードしています <xスクロールテーブル スタイル="マージントップ: 10px" 行キー="id" :itemSize="22" :rowSelection="{selectedRowKeys: selectedRowKeys、onChange: onSelectChange、幅:50}" :columns="列" :dataSource="データ"> <テンプレート スロット="アクション" スロット スコープ="{レコード、テキスト}"> <a @click="handleDetail(record)">詳細</a> </テンプレート> </x-スクロールテーブル> コンポーネントパッケージの概要1. 可能な限り計算プロパティを使用するテーブルは単純にカプセル化されていますが、多くの属性を定義する必要があります。データに変数を定義する代わりに計算属性を使用すると、変数のメンテナンスの作業負荷を軽減できます。 コンポーネント全体では 1 つのページ変数のみが定義され、他の変数は計算プロパティを使用します。 データ() { 戻る { // 現在表示されているページ番号 page: 1, }; }, 例えば: ページ属性を通じて計算プロパティを定義し、現在読み込まれているデータの量を示します。 // 表示される添え字の最大数は、データ項目の合計数よりも大きくなる可能性があります。この問題を解決するにはスライスを使用します。lastIndex() { this.pageSize * this.page を返します。 }, この計算されたプロパティを通じて、他の計算されたプロパティも同時に導出される。 // テーブルデータがロードされたかどうかを示します busy() { this.lastIndex >= this.dataSource.length を返します。 }, // 現在RecycleScrollerスクロールコンポーネントにロードされているデータtableData() { this.dataSource.slice(0, this.lastIndex) を返します。 }, 一連の計算プロパティはページ プロパティから派生します。ページ プロパティのみを維持する必要があり、その他は自動的に計算されます。 2. テーブル用のスロットを用意するまず、レンダリングする必要がある列は、テーブルから渡される列パラメータを通じて計算されます。計算されたプロパティもここで使用されます。 // columnFieldKey 値をキーとして、配列項目を値として使用して、列配列を列オブジェクトに変換します。columnMap() { this.columns.reduce((returnValue, cur) => { を返します。 returnValue[cur[列フィールドキー]] = cur; 戻り値を返します。 }, {}); }, // 配列内の列キー値を取得します --columnFieldKey 列キー() { this.columns を返す .map(item => item[列フィールドキー]); }, テンプレートのトラバース <div v-for="(キー) of columnKeys" クラス="ellipsis-cell" :key="キー" :style="itemStyle(列マップ[キー])" > <slot v-if="izSlotRender(columnMap[キー])" :name="columnMap[キー].scopedSlots.customRender" :record="行" :text="行[キー]"> </スロット> <span v-else :title="行[キー]">{{ renderItem(行、インデックス、キー) }}</span> </div> // スロットレンダリングを使用するかどうか izSlotRender(item) { item.scopedSlots と item.scopedSlots.customRender を返します。 }, 列を定義するときに scopedSlots と customRender が渡されると、スロット レンダリングが使用されます。 しかし、ここでは ant-design-vue のテーブル スロットのレンダリングとは違いがあります。 スロットは slot タグで定義しました。親コンポーネントがスロットパラメータを取得するときは、 slot-scope="{record,text}" オブジェクト分解メソッドのみを使用できます。 ant-design-vue テーブルでは、 slot-scope="record,text" を直接使用してパラメータを取得できます。 スクロール読み込みデータの別の実装テーブルデータが多い場合、データが表示される前にページを読み込むのに時間がかかります。これは良いエクスペリエンスではないので、データを読み込むにはスクロールする必要があります。 <el-table :data="materielList" style="width: 100%" class="familyDataDetail" height="250"> <el-table-column prop="eventId" label="イベントID"> <テンプレートスコープ="スコープ"> <label>{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].sn}}</label> </テンプレート> </el-table-column> <el-table-column prop="title" label="対応するイベント"> <テンプレートスコープ="スコープ"> <label>{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].title}}</label> </テンプレート> </el-table-column> <el-table-column prop="年齢" label="担当者"> <テンプレートスコープ="スコープ"> <ラベル>{{eventMap == null || eventMap[scope.row.eventId] == null || eventMap[scope.row.eventId].personalInformation == null ? '--': イベントマップ[scope.row.eventId].personalInformation.name}}</label> </テンプレート> </el-table-column> <el-table-column prop="誕生日" label="素材名"> <テンプレートスコープ="スコープ"> <label>{{materirlName}}</label> </テンプレート> </el-table-column> <el-table-column prop="idcardNo" label="ステータス"> <テンプレートスコープ="スコープ"> <label>{{formatType(scope.row.type)}}</label> </テンプレート> </el-table-column> <el-table-column prop="関係" label="数量"> <テンプレートスコープ="スコープ"> <label>{{formatUseNum(scope.row.useNum)}}</label> </テンプレート> </el-table-column> <el-table-column prop="ethtic" label="使用時間"> <テンプレートスコープ="スコープ"> <label>{{changeTime(scope.row.createOn)}}</label> </テンプレート> </el-table-column> </el-table> 以下はjs部分です メソッド: { 初期化(パラメータ){ id = param.param && param.param.id とします。 if(id){ this.start = 0 MaterialRecordService.query({param: {baseId: this.baseId, materialId: id},start: this.start,limit: 30}).then(rsp =>{//最初のリクエストデータ、30レコード this.start += 30 this.materielList = rsp.data MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => { this.eventMap = {} rsp3.data.forEach(n => (this.eventMap[n.id] = n)) }) }) } }, スクロール() { 内部に document.querySelector('.el-table__body-wrapper') を追加します。 if(inner.scrollHeight - inner.scrollTop <= inner.clientHeight){//true の場合、一番下に到達したことが証明され、インターフェースを要求できます。if(this.flag){//スクロールイベントのスイッチを設定します (データで flag: true を宣言します) デフォルトは true です。 this.flag = false MaterialRecordService.query({param: {baseId: this.baseId, materialId: this.entity.id},start: this.start,limit:30}).then(rsp =>{//一度に30個のアイテムをロードします this.materielList = this.materielList.concat(rsp.data) this.start += 30 this.flag = true MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => { rsp3.data.forEach(n => (this.eventMap[n.id] = n)) }) }) } } } }, マウントされた(){ this.init({...this.param})<br> //テーブル dom オブジェクトのスクロール イベントをリッスンします。 document.querySelector('.el-table__body-wrapper').addEventListener('scroll', this.onScroll); } ここではどのDOMオブジェクトが監視されているかを説明します また、scrollHeight、scrollTop、clientHeightの3つのプロパティについても説明する必要があります。 これは他の人の写真のスクリーンショットで、いくつか追加されています scrollHeight: Web ページの全テキストの高さ。 scrollTop: ウェブページのスクロールの高さ、 clientHeight: ウェブページの表示領域の高さ 以上がVueのスクロールロードテーブルの実装の詳細内容です。Vueのスクロールロードテーブルの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL 5.6 zipパッケージのインストールチュートリアルの詳細
目次1. 存在する1.1 説明1.2 例1.3 交差/2017-07-21 2. 除く2.1 説明2...
JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...
docker コンテナを使用する場合、vim がインストールされていないことがあり、vim コマンド...
<br />ページに <img src=""> が含まれ...
目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は? 3. ローカルス...
要約すれば: 1. データベースの設計とテーブルの作成時にパフォーマンスを考慮する2. SQLの記述...
目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...
セクションコース内容営業時間1 ウェブデザインの概要2 2 HTML 基本タグとフォーマットタグ 2...
ワイルドカードのカテゴリ: %パーセント ワイルドカード: 任意の文字が任意の回数出現できることを示...
グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...
目次0x0 はじめに0x1 インストール0x2 ノードサイドバー0x3 統合例0x0 はじめにプロジ...
まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...
この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...
目次1. まずRefとは何かを説明しましょう2. フックでのrefの使用1. HTMLDomフックで...
移動を実現するためにtranslateパラメータを使用しますtranslateX: X 軸に沿って移...