Vue implementiert eine Scroll-Ladetabelle

Lassen Sie Daten = neues Array (10000).fill(1);

Daten = Daten.Map((Element1, Index) => {
    lass Element = {};
    Artikel-ID = Index;
    Artikel.Alter = "Name";
    item.address = "Adresse";
    Artikel zurückgeben;
});
Standarddaten exportieren;

<x-scroll-tabelle
                Stil="Rand oben: 10px"
                Zeilenschlüssel="id"
                :Artikelgröße="22"
                :rowSelection="{selectedRowKeys: selectedRowKeys, beiÄnderung: beiSelectChange,width:50}"
                :columns="Spalten"
                :dataSource="Daten">
            <template slot="Aktion" slot-scope="{Datensatz,Text}">
                <a @click="handleDetail(Datensatz)">Details</a>
            </Vorlage>
        </x-scroll-table>

  Daten() {
    zurückkehren {
      // Aktuelle Anzeigeseitennummer Seite: 1,
    };
  },

 // Die maximale Anzahl der anzuzeigenden Indizes kann größer sein als die Gesamtzahl der Datenelemente. Verwenden Sie Slice, um dieses Problem zu lösen. lastIndex() {
      gib diese Seitengröße zurück * diese Seite;
    },

// Zeigt an, ob die Tabellendaten geladen wurden busy() {
      gibt diesen.letztenIndex >= diese.Datenquelle.Länge zurück;
    },
 // Die aktuell in die RecycleScroller-Scrolling-Komponente geladenen Daten tableData() {
      gibt diese.dataSource.slice(0, diesen.letztenIndex) zurück;
    },

 // Konvertiere das Spalten-Array in ein Spaltenobjekt, wobei du den columnFieldKey-Wert als Schlüssel und das Array-Element als Wert verwendest columnMap() {
      gib dies zurück.Spalten.Reduce((returnValue, cur) => {
        returnValue[cur[Spaltenfeldschlüssel]] = cur;
        Rückgabewert zurückgeben;
      }, {});
    },
    // Den Spaltenschlüsselwert im Array abrufen – columnFieldKey
    Spaltenschlüssel() {
      gib diese Spalten zurück
          .map(item => item[spaltenFeldschlüssel]);
    },

<div v-for="(Schlüssel) von Spaltenschlüsseln"
             Klasse = "Ellipsenzelle"
             :Schlüssel="Schlüssel"
             :Stil="ArtikelStil(SpaltenMap[Schlüssel])"
        >
          <slot v-if="izSlotRender(SpaltenMap[Schlüssel])"
                :name="columnMap[Schlüssel].scopedSlots.customRender"
                :Datensatz="Zeile"
                :text="Zeile[Schlüssel]">
          </slot>
          <span v-else :title="Zeile[Schlüssel]">{{ renderItem(Zeile, Index, Schlüssel) }}</span>
        </div>

  // Ob Slot-Rendering verwendet werden soll izSlotRender(item) {
      gibt item.scopedSlots und item.scopedSlots.customRender zurück;
    },

<el-table :data="materialliste" style="width: 100%" class="familyDataDetail" height="250">
                <el-table-column prop="eventId" label="Ereignis-ID">
                    <Vorlage Umfang="Umfang">
                        <label>{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].sn}}</label>
                    </Vorlage>
                </el-Tabellenspalte>
                <el-table-column prop="title" label="Entsprechendes Ereignis">
                    <Vorlage Umfang="Umfang">
                        <label>{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].title}}</label>
                    </Vorlage>
                </el-Tabellenspalte>
                <el-table-column prop="Alter" label="Verantwortliche Person">
                    <Vorlage Umfang="Umfang">
                        <label>{{eventMap == null || eventMap[scope.row.eventId] == null || eventMap[scope.row.eventId].personalInformation == null ? '--':
                            eventMap[scope.row.eventId].personalInformation.name}}</label>
                    </Vorlage>
                </el-Tabellenspalte>
                <el-table-column prop="Geburtstag" label="Materialname">
                    <Vorlage Umfang="Umfang">
                        <label>{{materirlName}}</label>
                    </Vorlage>
                </el-Tabellenspalte>
                <el-table-column prop="idcardNo" label="status">
                    <Vorlage Umfang="Umfang">
                        <label>{{formatType(scope.row.type)}}</label>
                    </Vorlage>
                </el-Tabellenspalte>
                <el-table-column prop="Beziehung" label="Menge">
                    <Vorlage Umfang="Umfang">
                        <label>{{formatUseNum(scope.row.useNum)}}</label>
                    </Vorlage>
                </el-Tabellenspalte>
                <el-table-column prop="ethnisch" label="Nutzungszeit">
                    <Vorlage Umfang="Umfang">
                        <label>{{Änderungszeit(scope.row.createOn)}}</label>
                    </Vorlage>
                </el-Tabellenspalte>
            </el-Tabelle>

Methoden: {
  init (Parameter) {
  let id = param.param && param.param.id
  wenn(id){
      dies.start = 0
          MaterialRecordService.query({param: {baseId: this.baseId, materialId: id},start: this.start,limit: 30}).then(rsp => {//Erste Daten anfordern, 30 Datensätze this.start += 30
            diese.materialliste = rsp.daten
            MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => {
                diese.eventMap = {}
                rsp3.data.forEach(n => (diese.eventMap[n.id] = n))

                             })
             })
  }
  },
  beimScrollen() {
      let inner = document.querySelector('.el-table__body-wrapper');
      if(inner.scrollHeight - inner.scrollTop <= inner.clientHeight){//Wenn true, beweist dies, dass das Ende erreicht ist und die Schnittstelle angefordert werden kann. if(this.flag){//Einen Schalter für das Scroll-Ereignis festlegen (Flag deklarieren: true in Daten). Der Standardwert ist true.
             this.flag = falsch
                          MaterialRecordService.query({param: {baseId: this.baseId, materialId: this.entity.id},start: this.start,limit:30}).then(rsp => {//30 Elemente gleichzeitig laden this.materielList = this.materielList.concat(rsp.data)
                  dies.start += 30
                  dieses.flag = wahr
              MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => {
               rsp3.data.forEach(n => (diese.eventMap[n.id] = n))
              })
             })
                    }
      }
   }
},
montiert () {
      this.init({...this.param})<br> //Auf das Scroll-Ereignis des Tabellen-DOM-Objekts hören document.querySelector('.el-table__body-wrapper').addEventListener('scroll', this.onScroll);
    }