Vue + element when there is no paging at the back end, the front end completes the paging of El table independently - scrolling to the bottom to load new data

1、 First, you can view the following links , to el-table Table binding monitor Scroll bar Events , Make global custom instructions .

link :vue+element-ui：vue Custom instruction listening el-table The rolling Events , Scroll to the bottom of the scroll bar to load new data _BUG_Jia The blog of -CSDN Blog 1. First, in the vue In the project main.js Add a listener to the file el-table Custom instructions for scroll bar Events , For global use .// Prepare a scroll load instruction Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { https://blog.csdn.net/BUG_Jia/article/details/1244573192、 Secondly, after the data request is completed , First rendering 10 strip , Save the complete data in another variable .

 data() {
    return {
      //  Render table data 
      tableData: [],
      //  Save the complete data of the table 
      tableDataTotal: []
      }
    }

      this.$axios
        .post(`/ The path of the request `,  Request parameters )
        .then(response => {
          this.loading = false;
          const res = response.data;
          if (res.code === 200) {
            // You can start copying from here 
            //  Empty each request 
            this.tableData===[]// Render table variables 
            this.tableDataTotal===[]// The variable that holds all the data 
            let tableData = res.data;
            if (tableData.length > 10) {
              this.tableDataTotal = tableData;// Store all requested data 
              this.tableData = tableData.slice(0, 10);// Before storing the request 10 Data , To render for the first time 
            }
            // You can end the copy here 
          }
        })
        .catch(error => {
          this.loading = true;
          Message({
            message: error,
            type: "error",
            duration: 5 * 1000
          });
        });

3、 After reading the top link , here el-table The label has been added v-loadmore=“ Custom function name instruction ”, Process the data in the custom function name , Add... Every time you trigger 10 Strip to tableData In the middle .

   // form 
         <el-table
           ref="tableData"
            v-loadmore="loadMore"
            v-loading="loading"
            :data="tableData"
            border
            stripe
          >
   // 8. Table scroll loading event 
    loadMore() {
    // It can be processed according to the data type returned by the back end , Not necessarily in this way ,
       //1. The idea is that whenever this function is triggered , First get the number of pieces at this time (tableNum)
      var tableNum = this.tableData.length;
       //2. Re pass tableNum Intercept all data stored tableDataTotal After 10 strip (a)
      let a = this.tableDataTotal.slice(tableNum, tableNum + 10);
      a.map(item => {
       //3. Again push To the page to be rendered tableData Go to variables 
        this.tableData.push(item);
      });
      if(a.length===0){
        this.$message.warning(' It's the end of it ')
      }
    }