【Vue】vue+element-ui的表格数据和分页模块关联问题?

【Vue】vue+element-ui的表格数据和分页模块关联问题?
有哪个大神知道 表格数据怎么和分页模块关联在一起吗?

回答

如果是后台处理分页问题，那么你每次请求数据的时候，就要将当前页数和每页显示条数发过去，然后后台就会返回相关的数据

前台处理分页方法：

 tablePagination(data=[]){
      /**
       * 表格数据分页的方法
       */
      let array = [], startNum=0, endNum = 0;
      this.total = data.length;
      startNum = (this.currentPage-1)*this.pageSize;
      if(this.currentPage*this.pageSize<this.total){
          endNum = this.currentPage*this.pageSize;
      } else {
          endNum = this.total;
      }
      array = data.slice(startNum, endNum);
      return array;
    },

调用的时候：
computed:{

   showTable(){
     return this.tablePagination(this.$store.getters.tableData);
   }
},

  • 首先，你要明白，表格数据和分页模块根本没有直接联系

  • 分页模块只负责分页的显示，它其实只需要两个参数：当前页和总页数

  • 而分页模块里这两个参数，可以和Vue里面的数据进行绑定

  • 分页模块点击时候，会触发v-on:change事件，而此时，当前页改变，只需要在事件方法中重新根据新的当前页数据去取表格数据即可（至于表格数据的分页，一般只要传当前页码和每页条数（假设是10条）给接口。如果是前端处理的，只需要从所有数据中的第(当前页码 - 1) * 10开始，截取10条数据即可）

要有两个模块独立的概念, 思考他们哪些变量让他们有了关联。
其实你要做的最多也就是进行个2次封装, 将 table 与 pagination 一起封装为一个完整的表格组件。
组件内部无非就是先考虑表格 当前 展示的数据从哪里开始到哪里结束
然后考虑分页组件能分几页，当前是第几页。

假如如: const arr = new Array(1000), arr 为长度1000的有效数组。然后设定每一页显示几条数据(假设10条), 那表格第一页显示的数据就为 arr[0]-arr[9] 这10条数据, 分页组件先计算总条数(1000 / 10), 设定初始显示为第一页。
当点击页数选择分页的时候表格要展示的数据就是(假设点击了分页5): arr[(5 - 1) * 10] - arr[5 * 10 - 1]

写的比较匆忙, 有逻辑错误的地方, 望指正。

你在执行分页上的一些事件时把对应的参数传过去去调取获取列表的接口就行了

这个很简单的，你要了解分页的原理。分页和table只是两个展示模块，表格里的数据是根据分页的页数（page）和每页的数据条数（pagesize）从数据库里查出来的。比如，page=1，pagesize=10,这时你会发出一个请求，后台查出库里相关的1-10条数据，你点击了第二页的话，page=2，pagesize=10，这时查出11-20条数据，返回来的都是data。然后你的表格只要把这个data填进去就好了。

表格只是将获取的数据渲染出来
而后台的数据有很多，通过分页可以将后台大量的数据按分组获取。
二者关联的流程应该是：
首次加载，默认第一页获取前面11条数据，然后通过v-for遍历数据显示表格，用户通过点击事件改变页数，同时向后台发送请求，获取相应页数所对映的数据，最后重新渲染。

我想问一下 为什么我传递的数据在 ：total和 ：page-size 里面没有显示的呢

你的分页模块的 “共98页”和后面的“跳转到”显示的是中文的，是要改什么参数吗？

以上是 【Vue】vue+element-ui的表格数据和分页模块关联问题? 的全部内容， 来源链接： utcz.com/a/73854.html

回到顶部