Vue implementiert Pulldown, um mehr zu laden

npm install --save el-table-infinite-scroll

// Haupt.js
 
importiere elTableInfiniteScroll aus „el-table-infinite-scroll“;
 
Vue.use(elTableInfiniteScroll);

<Skript>
// Importieren Sie „elTableInfiniteScroll“ von „el-table-infinite-scroll“;
Standard exportieren {
  // Anweisungen registrieren: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</Skript>

<el-table :height="Tabellenhöhe" v-el-table-infinite-scroll="Mehr laden">
 
</el-Tabelle>

<Vorlage>
    <div Klasse="App-Container">
        <el-table :height="Tabellenhöhe" v-el-table-infinite-scroll="Weitere laden" :data="Tabellenliste">
            <!-- Tabellendaten ausgelassen-->
        </el-Tabelle>
    </div>
</Vorlage>
 
<Skript>
// Importieren Sie das Plugin „import elTableInfiniteScroll from "el-table-infinite-scroll";
 
Standard exportieren {
    Name: "Index",
    Daten() {
        zurückkehren {
            // Tabellenhöhe tableHeight:"",
            // Gesamtzahl der Daten tableCount:0,
            // Tabellendatenliste tableList:[],
            // Wird es geladen? tableLoading: false,
            // Tabellensuchbedingungen tableSearch:{
                Seite:1
            }
        }
    },
    // Anweisungen registrieren: {
        "el-table-infinite-scroll": elTableInfiniteScroll,
    },
 
    erstellt() {
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // Die Höhe der Tabelle dynamisch berechnen. 200 ist die Höhe aller anderen Elemente auf dem Bildschirm außer der Tabelle. Dies hängt von der tatsächlichen Situation ab. this.tableHeight = windowHeight - 200 + "px";
    },
    montiert(){
        dies.getTableData(diese.tableSearch);
    },
 
    Methoden: {
        // Tabellendaten anfordern getTableData(search) {
            let page = Suchseite;
            let url = "index?page=" + Seite;
            // Wenn Sie die Seite zum ersten Mal öffnen, müssen Sie die Daten einmal laden. Um zu verhindern, dass zu viele Daten automatisch ein Scrollen auslösen, müssen Sie das Laden einstellen this.tableLoading = true;
            dies.$http.get(url).then((Ergebnis) => {
                wenn (res.code == 10000) {
                    // Daten verketten this.tableList = this.tableList.concat(result.data.list);
                    this.tableCount = Ergebnis.Anzahl;
                    diese.tableSearch.page = Ergebnis.aktuell;
                    Dies.tableLoading = falsch;
                }
            });
        },
        // Weitere laden loadMore() {
            wenn (!this.tableLoading) {
                Dies.tableLoading = wahr;
                wenn (diese.Tabellenliste.Länge < diese.Tabellenanzahl) {
                    diese.tableSearch.page++;
                    dies.getTableData(diese.tableSearch);
                } anders {
                    this.$message("Alle Daten wurden geladen!");
                    Dies.tableLoading = falsch;
                }
            }
        },
    }
};
</Skript>

<Vorlage>
    <div Klasse="App-Container">
        <div :style="{height:tableHeight,overflow:'auto'}" id="tableBox">
            <!-- Tabellendaten ausgelassen-->
        </div>
    </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    Name: "Index",
    Daten() {
        zurückkehren {
            // Tabellenhöhe tableHeight:"",
            // Gesamtzahl der Daten tableCount:0,
            // Tabellendatenliste tableList:[],
            // Wird es geladen? tableLoading: false,
            // Tabellensuchbedingungen tableSearch:{
                Seite:1
            }
        };
    },
    erstellt(){
        let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        // Höhe der Tabelle dynamisch berechnen. 200 ist die Höhe aller anderen Elemente auf dem Bildschirm außer der Tabelle. Dies hängt von der tatsächlichen Situation ab. this.tableHeight = windowHeight - 200 + 'px';
    },
    montiert() {
        dies.getTableData(diese.tableSearch);
        document.getElementById("tableBox").addEventListener('scroll',this.onTableScroll); 
    },
 
    vorZerstören() {
        // Entfernen Sie das Abhörereignis window.removeEventListener('scroll', this.onTableScroll)
    },
 
    Methoden: {
        aufTableScroll(){
            var obj = document.getElementById("tableBox");
            var scrollHeight = obj.scrollHeight;
            var scrollTop = obj.scrollTop; 
            var objHeight = obj.offsetHeight;  
            // 100 ist der Schwellenwert, der je nach tatsächlicher Situation angepasst werden kann if(scrollHeight <= (scrollTop + objHeight + 100) && !this.tableLoading && this.tableList.length<this.tableCount){ 
                Dies.tableLoading = wahr;
                diese.tableSearch.page++;
                setzeTimeout(()=>{   
                    dies.getTableData(diese.tableSearch);
                },300)
            }
        },
 
        getTableData(Suche){
            let page = Suchseite;
            let url = "index?page=" + Seite;
            // Wenn Sie die Seite zum ersten Mal öffnen, müssen Sie die Daten einmal laden. Um zu verhindern, dass zu viele Daten automatisch ein Scrollen auslösen, müssen Sie das Laden einstellen this.tableLoading = true;
            dies.$http.get(url).then((Ergebnis) => {
                wenn (res.code == 10000) {
                    // Daten verketten this.tableList = this.tableList.concat(result.data.list);
                    this.tableCount = Ergebnis.Anzahl;
                    diese.tableSearch.page = Ergebnis.aktuell;
                    Dies.tableLoading = falsch;
                }
            });
        },
        
     
    },
};
</Skript>