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

1、首先可以查看以下链接，给el-table表格绑定上监听滚动条的事件，做成全局的自定义指令。
链接: https://blog.csdn.net/weixin_54129994/article/details/116987122.
2、其次在数据请求完毕后，初次渲染10条，将完整数据保存在另外一个变量中去。

 data() {
    return {
      // 渲染表格的数据
      tableData: [],
      // 保存表格的完整数据
      tableDataTotal: []
      }
    }
1
2
3
4
5
6
7
8

      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
          });
        });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

//表格
 <el-table
           ref="tableData"
            v-loadmore="loadMore"
            v-loading="loading"
            :data="tableData"
            border
            stripe
          >
1
2
3
4
5
6
7
8
9

   // 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('已经到底啦')
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15