Vueはスクロールロードテーブルを実装します

Vueはスクロールロードテーブルを実装します

成果を達成する

コードクラウドアドレス

転がり荷重知識備蓄

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の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueは純粋なフロントエンドのテーブルスクロールとページングロードを実装します
  • Vueカスタム命令は、タブテーブルの天井効果を実現するためのUUIDスクロール監視コードを生成します。
  • Vue elementUI テーブル テーブル データ スクロール 遅延読み込み実装方法
  • Vue 要素 ui テーブル テーブル スクロール ロード メソッド
  • Vueはアニメーションを使用してスクロールテーブル効果を実現します

<<:  MySQL 5.6 zipパッケージのインストールチュートリアルの詳細

>>:  Linux での Nginx 監視の問題

推薦する

SQL Server での exists と except の使用法の概要

目次1. 存在する1.1 説明1.2 例1.3 交差/2017-07-21 2. 除く2.1 説明2...

jsのイベントオブジェクトを深く理解しましょう

JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...

dockerコンテナにviコマンドをインストールする簡単な操作

docker コンテナを使用する場合、vim がインストールされていないことがあり、vim コマンド...

JS 内の Json 文字列 + Cookie + ローカルストレージ

目次1.Json文字列1.1Json構文1.2 例2. クッキー2.1 使い方は? 3. ローカルス...

MySQL 最適化戦略 (推奨)

要約すれば: 1. データベースの設計とテーブルの作成時にパフォーマンスを考慮する2. SQLの記述...

Docker で Node プロジェクトをビルドしてデプロイする方法

目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...

ウェブデザインの教育または学習プログラム

セクションコース内容営業時間1 ウェブデザインの概要2 2 HTML 基本タグとフォーマットタグ 2...

Mysql | ワイルドカード(%、_ など)を使用したファジークエリの詳細な説明

ワイルドカードのカテゴリ: %パーセント ワイルドカード: 任意の文字が任意の回数出現できることを示...

node.js グローバル変数の具体的な使用法

グローバルオブジェクトすべてのモジュールは呼び出すことができますglobal: ブラウザの wind...

Vue.js で AntV X6 を使用する手順の例

目次0x0 はじめに0x1 インストール0x2 ノードサイドバー0x3 統合例0x0 はじめにプロジ...

Ubuntu 12.04 でカーネルツリーを構築する実装プロセスの詳細な説明

まず使用しているカーネルのバージョンを確認してくださいlin@lin-仮想マシン:~$ uname ...

JavaScript はドラッグ可能なモーダルボックスを実装します

この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...

ReactにおけるRefの相互利用の詳細な説明

目次1. まずRefとは何かを説明しましょう2. フックでのrefの使用1. HTMLDomフックで...

CSS3 で翻訳効果 (transfrom: translate) を実装する例

移動を実現するためにtranslateパラメータを使用しますtranslateX: X 軸に沿って移...