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

データ = new Array(10000).fill(1);

データ = data.map((item1, インデックス) => {
    項目を {} とします。
    アイテムID = インデックス;
    item.age = "名前";
    item.address = "住所";
    返品商品;
});
デフォルトデータをエクスポートします。

<xスクロールテーブル
                スタイル="マージントップ: 10px"
                行キー="id"
                :itemSize="22"
                :rowSelection="{selectedRowKeys: selectedRowKeys、onChange: onSelectChange、幅:50}"
                :columns="列"
                :dataSource="データ">
            <テンプレート スロット="アクション" スロット スコープ="{レコード、テキスト}">
                <a @click="handleDetail(record)">詳細</​​a>
            </テンプレート>
        </x-スクロールテーブル>

  データ（） {
    戻る {
      // 現在表示されているページ番号 page: 1,
    };
  },

 // 表示される添え字の最大数は、データ項目の合計数よりも大きくなる可能性があります。この問題を解決するにはスライスを使用します。lastIndex() {
      this.pageSize * this.page を返します。
    },

// テーブルデータがロードされたかどうかを示します busy() {
      this.lastIndex >= this.dataSource.length を返します。
    },
 // 現在RecycleScrollerスクロールコンポーネントにロードされているデータtableData() {
      this.dataSource.slice(0, this.lastIndex) を返します。
    },

 // 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 を返します。
    },

<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>

メソッド: {
  初期化（パラメータ）{
  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);
    }