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 監視の問題

推薦する

Sparkの紹介とHadoopとの比較

目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...

Ubuntu Server のターミナルのウェルカム メッセージで広告を無効にする方法

最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...

HTML の入力の readonly 属性と disabled 属性の違いについて簡単に説明します。

「読み取り専用」と「無効」はどちらも、ユーザーがフォーム フィールドの内容を変更できないようにしま...

MySQL 数値型オーバーフローの処理方法

さて、質問させてください。MySQL で列を int(0) に設定すると何が起こりますか?この問題を...

ストリーマーボタンの効果を実現するCSS3アニメーション

CSS3 を学習する過程で、CSS3 属性を使用すると多くのクールな効果を簡単に実現できることが分か...

CSSを使用してHTMLテキストボックス内のテキストの垂直方向の中央を制御する

Text の height 属性が定義されている場合、Text に入力されたテキストは垂直方向に中央...

MySQL の昇順および降順データソートの実装

データの昇順、降順ソート1. フィールド名による単一フィールドのソート順機能:どのフィールドを基準に...

CentOS 6.2 に MySQL 5.7.28 をインストールするチュートリアル (mysql ノート)

1. 環境整備1.MySQLインストールパス: /usr/local 2. CentOS 6.2 ...

表の最初の行と最初の列を固定し、適応型ウィンドウを実現するための CSS の例コード

今日のキャンパス採用筆記試験では、固定された最初の行と最初の列を実装し、幅をウィンドウの変更に適応さ...

Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する

1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...

フローチャートとUIフローの違い

UI デザインにおける多くの概念は言葉で言えば似ているように見えるかもしれませんが、実際には大きく異...

MySQL サービスを起動できない問題の解決策を含む MySQL 5.7.17 インストール チュートリアル

.net 開発に関しては、Microsoft の SQL Server データベースに精通しており、...

HTMLフロートの使用法の簡単な分析

float の使用例左サスペンション: float:left;右サスペンション: float:rig...

MySQL InnoDBストレージエンジンについて簡単に説明します

序文:ストレージ エンジンはデータベースの中核です。MySQL の場合、ストレージ エンジンはプラグ...

Apache SkyWalkingのセルフモニタリングを素早く有効にする方法を説明します

1. Prometheusテレメトリデータを有効にするデフォルトでは、テレメトリは次のように無効にな...