vue +element实现分页加分组

vue+element 实现分页

for (let i = 1; i <= this.total; i++) {
          if (res.data.list.length % i === 0 && this.pageSizes.length <= 10) {
            this.pageSizes.push(i)
          }
        }
这个循环是拿到数据的总数 以此判断取余数 数组的最大长度是 10 如果数据量庞大可以考虑把i换成固定的
pageData.length ===0? tableData:pageData 
利用vue的渲染方式  提供两个数据的副本  一个放全部数据  一个放所进行的分页的副本 利用三木判断 放分页的副本是否
有东西 有则渲染副本而非全部

<el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
提供分页的element组件

total: 1,
      pageSize: 0,
      pageSizes: [],
      val: 0,
      pageData: []

所需的参数
handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.val = val
let a = JSON.parse(JSON.stringify(this.tableData))
      this.pageData = a.splice(0, val)
    },
对全部数据进行深拷贝  避免splice破坏数组 而造成分页完完 数据完
因为this.pageData 是一个空数组 直接把分页的结果付给他  利用vue的双向绑定来进行数据的实时更新
这里是当选择分页每页显示多少条数据以后 可以立刻进行分页
    handleCurrentChange(val) {
      let a = JSON.parse(JSON.stringify(this.tableData))
      this.pageData = a.splice(val *  this.val-  this.val,  this.val)
    }
这里a依然是对总的数据的一个深拷贝 因为之前已经保存this.val当前是一页保存多少条数据
 获取一夜显示的数据 同时利用他来进行从什么位置取到
什么位置  和取几条  位置的计算是拿当前的页数乘上当前的显示数量又因为js的数组处理是从0开始所以
应该减去这个数量 就是当前的位置  
例如   数据是[0,1,2,3,4]  一页显示2条数据 当前为第2页 它在数据中截取的位置（非js中）是 2*2 即下回从第四个数据开始
数字理应是从4开始
但是 数据默认的是 0 1 2 3 4  而非是从 1开始的这个时候会产生一个位置错位 即他是从三开始
所以要减去
this.pageData 依然是取数据 截取(当前的页数 * 当前的数量 - 1 (是因为js在位置上是从0开始的) ,截取多少数量 )
进行显示

小干货
js 对象添加 删除 修改 属性
var a={“id”:1,“name”:“danlis”};
//添加属性
a.age=18;
console.log(a);
//结果：Object { id: 1, name: “danlis”, age: 18 }
//修改属性
a.age=“我怎么知道”;
//结果：Object { id: 1, name: “danlis”, age: “我怎么知道” }
//删除属性
delete a.age;
//结果：Object { id: 1, name: “danlis” }