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

1、首先可以查看以下链接,给el-table表格绑定上监听滚动条的事件,做成全局的自定义指令。
链接: https://blog.csdn.net/weixin_54129994/article/details/116987122.
2、其次在数据请求完毕后,初次渲染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中去。

//表格
 <el-table
           ref="tableData"
            v-loadmore="loadMore"
            v-loading="loading"
            :data="tableData"
            border
            stripe
          >
   // 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
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现分页的思路大致如下: 1. 在Vue的data中定义一个数组,用于存放分页数据。 2. 在mounted函数中发起请求获取数据,并将数据存放到定义的数组中。 3. 在页面上使用Element-ui的Table组件展示数据,并且使用Pagination组件实现分页功能。 4. 当用户点击分页按钮时,触发pagination的current-change事件,重请求数据并更数组中的数据。 以下是一个简单的例子: ``` <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="sex" label="性别"></el-table-column> </el-table> <el-pagination @current-change="handlePageChange" :current-page="currentPage" :page-size="pageSize" :total="total"> </el-pagination> </div> </template> <script> import axios from 'axios'; export default { data() { return { tableData: [], currentPage: 1, pageSize: 10, total: 0 }; }, mounted() { this.fetchData(); }, methods: { fetchData() { axios.get('/api/data', { params: { page: this.currentPage, pageSize: this.pageSize } }).then(response => { this.tableData = response.data.list; this.total = response.data.total; }); }, handlePageChange(currentPage) { this.currentPage = currentPage; this.fetchData(); } } }; </script> ``` 在上面的例子中,我们使用了Element-ui的Table和Pagination组件,并且使用axios来发起请求。在mounted函数中,我们调用fetchData函数来获取数据,并将数据存放到tableData数组中。在页面上,我们将tableData数组作为Table组件的data属性传递,展示数据。同时,我们使用Pagination组件来实现分页功能。当用户点击分页按钮时,我们调用handlePageChange函数来更currentPage变量,并重调用fetchData函数来获取数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值