Vue前端对后端数据进行分页设置的思路，以及搜索时间段内的数据实现思路

首先安装element-ui插件，在组件中配置表格，分页能功能的模板
然后分页模板中的属性介绍：
    :current-page=当前页数，支持 .sync 修饰符
    :page-sizes=每页显示个数选择器的选项设置
    :page-size每页显示条目个数，支持 .sync 修饰符
    :layout组件布局，子组件名用逗号分隔
    total总条目数
    
1.在data中定义分页的数据：
ToPages: {
    cur_index: 1,//当前页
    cur_sizes: [5, 10, 15, 20],//每页条数
    cur_size: 5,//当前页数
    cur_layout: "total, sizes, prev, pager, next, jumper", //翻页属性
    total: 0,//总条数
},

2.在请求数据时定义两个数组一个总数据一个过滤出来的数据。

3.定义分页初始值的方法，分页数据中总条数=请求的数据长度，当前页数=1，
当前页数=5，调用分页操作的方法。

4.定义分页操作的方法，过滤出总数据,里面有两个值一个当前数据item一个
index下标.return返回↓
    下标小于当前页*当前页数&&并且index下标大于等于（当前页数-1）* 
    当前页数
    
this.shuzu = this.tableData.filter((item, index) => {
    return (
      // 下标        当前页  1                  当前页数 5
      index < this.ToPages.cur_index * this.ToPages.cur_size &&
      index >=
        (this.ToPages.cur_index - 1) * this.ToPages.cur_size
    );
  });
  
5.然后分页触发调用的两个方法：
handleSizeChange修改当前页数为当前的值v
handleCurrentChange修改当前页为当前的值v
同时调用分页操作的方法。

6.最后在table表格中渲染过滤后的数据即可完成分页操作

分页模板

<div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ToPages.cur_index"
        :page-sizes="ToPages.cur_sizes"
        :page-size="ToPages.cur_size"
        :layout="ToPages.cur_layout"
        :total="ToPages.total"
      >
        <!-- 
        :current-page=当前页数，支持 .sync 修饰符
        :page-sizes=每页显示个数选择器的选项设置
        :page-size每页显示条目个数，支持 .sync 修饰符
        :layout组件布局，子组件名用逗号分隔
        total总条目数
     -->
      </el-pagination>
    </div>

data数据

// 旧数据
  tableData: [],
  // 过滤出来的数据
  shuzu:[],
  // 分页定义的数据
  ToPages: {
    cur_index: 1,//当前页
    cur_sizes: [5, 10, 15, 20],//每页条数
    cur_size: 5,//当前页数
    cur_layout: "total, sizes, prev, pager, next, jumper", //翻页属性
    total: 0,//总条数
  },

分页初始值

// 分页初始值
PaySizie() {
  // 总数等于数据长度
  this.ToPages.total = this.tableData.length;
  this.ToPages.cur_index = 1;
  this.ToPages.cur_size = 5;
  // 分页操作
  this.pryins()
},

分页操作

pryins() {
  this.shuzu = this.tableData.filter((item, index) => {
    return (
      // 下标        当前页  1                  当前页数 5
      index < this.ToPages.cur_index * this.ToPages.cur_size &&
      index >=
        (this.ToPages.cur_index - 1) * this.ToPages.cur_size
    );
  });
},

分页触发的方法

// 分页部分
handleSizeChange(v) {
  console.log(v);
  this.ToPages.cur_size = v;
  this.pryins()
},
handleCurrentChange(v) {
  console.log(v);
  this.ToPages.cur_index = v;
  this.pryins()
},

搜索实现的思路

在element-ui找到对应的时间段查询模板，安装到页面组件中。
定义时间段新时间段和旧时间段，分别代表开始时间和结束时间。
当我们触发搜索按钮时，将新时间段和旧时间段转换为时间戳
getTime，然后获取总数据，过滤出来将数据中的date添加时间转
换为时间，然后再转换为时间戳，return返回总数据时间大于等于
新时间段并且小于等于旧时间段，将处理好的这个数据赋值给表格
中渲染的数据即可。

data数据

filNew: {
    value1: "",
    value2: "",
},

触发方法

filData() {
  // 转换为时间戳
  // 新时间段
  let nW1 = this.filNew.value1.getTime();
  // 旧时间段
  let nY2 = this.filNew.value2.getTime();
  // 过滤数据赋值给表格数据
  this.shuzu = this.tableData.filter((res) => {
    // 转换为时间
    let sj = new Date(res.date);
    // 转换为时间戳
    let key = sj.getTime();
    // 进行判断
    return key >= nW1 && key <= nY2;
  });
},