vue+element在后端没有做分页的情况下，前端独立完成el-table表格的分页-滚动到底部加载新数据

1、首先可以查看以下链接，给el-table表格绑定上监听滚动条的事件，做成全局的自定义指令。

链接:vue+element-ui：vue自定义指令监听el-table的滚动事件，达到滚动条滚动到底部加载新数据_BUG_Jia的博客-CSDN博客1.首先在vue项目中的main.js文件添加一个监听el-table滚动条事件的自定义指令，以供全局使用。// 准备一个滚动加载指令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、其次在数据请求完毕后，初次渲染10条，将完整数据保存在另外一个变量中去。

 data() {
    return {
      // 渲染表格的数据
      tableData: [],
      // 保存表格的完整数据
      tableDataTotal: []
      }
    }

      this.$axios
        .post(`/请求的路径`, 请求参数)
        .then(response => {
          this.loading = false;
          const res = response.data;
          if (res.code === 200) {
            //可从此处开始复制
            // 每次请求前先进行置空处理
            this.tableData===[]//渲染表格的变量
            this.tableDataTotal===[]//存放所有数据的变量
            let tableData = res.data;
            if (tableData.length > 10) {
              this.tableDataTotal = tableData;//存放请求的所有数据
              this.tableData = tableData.slice(0, 10);//存放请求的前10条数据，以便初次渲染
            }
            //可从此处结束复制
          }
        })
        .catch(error => {
          this.loading = true;
          Message({
            message: error,
            type: "error",
            duration: 5 * 1000
          });
        });

3、看过顶部链接之后，此时 el-table标签中已经加入了 v-loadmore=“自定义函数名指令”，在自定义函数名中对数据进行处理，每次触发时就再追加10条到tableData中去。

   //表格
         
   // 8.表格滚动加载事件
    loadMore() {
    //可以根据后端返回的数据类型做处理，不一定按照此方法，
       //1.思路是每当触发此函数，首先拿到此时是多少条(tableNum)
      var tableNum = this.tableData.length;
       //2.再通过tableNum截取存储所有数据的tableDataTotal的后10条(a)
      let a = this.tableDataTotal.slice(tableNum, tableNum + 10);
      a.map(item => {
       //3.再push到要渲染到页面的tableData变量中去
        this.tableData.push(item);
      });
      if(a.length===0){
        this.$message.warning('已经到底啦')
      }
    }