1、mockJS创建分页的接口

请求方式：post
请求的url：member/list2/search/{page}/{size}

{
  "code": 2000,
  "flag": true,
  "message": "查询成功",
  "data": {
    "total": "@integer(100, 200)", // 总记录数
    "rows|10": [{
      "id|+1": 10,
      "cardNum": 10, //大于1000的正整数
      "name": "@cname",
      "birthday": "@date",
      "phone": 10, // 11个数字0-9间的数字
      "integral": 10,
      "money": 10, // 0-1000小数,1-3位小数位
      "payType|1": ['1', '2', '3', '4'], // 4选 其1
      "address": "@county(true)"
    }]
  }
}

2、在member.js下面创建分页的请求的axios接口

1、因为采用post请求，并且url要传参，所以采用反单引号链接，采用${ }进行字符串拼接

3、获取数据并分页
选取饿了么组件中的完整功能这个

1、 @size-change=定义每页的多少个，后面接方法
2、 @current-change定义当前页，后面接方法
3、total定义总页数，在下面data里面有初始化，在方法里面有this.total进行赋值
ps（当时出现了一个小状况，我的this.total=req. data. total;这段赋值出现问题，甚至出现NAN，无论我int转string还是string转int，进行赋值都没有用，最后问题出现在接口处，接口里面多个：）

<el-pagination
      @size-change="fetchaData"
      @current-change="fetchaData"
      :current-page="currentPage"
      :page-sizes="[10, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

将当前页Current和每页多少行Size传入后台接口

在下面methods里面定义上面绑定的方法

  // 当每页显示条数改变后，被触发、val最新的每页显示条数
    headleSizeChange(val) {
      this.pageSize = val;
         this.fetchaData();
    },
    // 当页码改变后，被触发 ，val是最新的页码
    headleCurrentChange(val) {
      this.currentPage = val;
         this.fetchaData();
    }

分页实现的全部代码如下所示

<template>
  <div>
    <!-- 通过这个   :model="searchMap"可以绑定下面data的值 -->
    <el-form
      :inline="true"
      ref="searchFrom"
      :model="searchMap"
      class="demo-form-inline"
      style="margin-top:20px"
    >
      <el-form-item>
        <el-input v-model="searchMap.cardNum" placeholder="会员卡号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="searchMap.name" placeholder="会员名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="searchMap.payType" placeholder="支付类型">
          <!-- 使用循环的方式 -->
          <el-option v-for="em in payTypeOption" :key="em.type" :label="em.name" :value="em.type"></el-option>
        </el-select>
      </el-form-item>
      <!-- 加入的日期要放发票这个里面<el-form-item></el-form-item> -->
      <!-- value-format="yyyy-MM-dd"这个就让提交的日期值是 birthday: "2020-05-06" 类型-->
      <el-form-item>
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="searchMap.birthday"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="fetchaData">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- :data=绑定数据，
    border 这个是表格边框-->
    <el-table :data="list" height="380" border style="width: 100%">
      <!-- <el-table-column prop="name" label="姓名" width="180"></el-table-column> -->
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="cardNum" label="会员卡号"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="birthday" label="生日"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="integral" label="积分"></el-table-column>
      <el-table-column prop="money" label="余额"></el-table-column>
      <el-table-column label="支付方式">
        <template slot-scope="scope">
          <!-- slot-scope="scope" 通过这个拿到本行的东西，并通过|传到后面的方法中-->
          <span>{{scope.row.payType|payTypeFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="区域"></el-table-column>
      <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit( scope.row.id)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="headleSizeChange"
      @current-change="headleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
// 导入请求的api
import memberApI from "@/api/member";
// 通过过滤器实现
// 支付类型
const payTypeOption = [
  { type: "1", name: "现金" },
  { type: "2", name: "支付宝" },
  { type: "3", name: "微信" },
  { type: "4", name: "银行卡" }
];

export default {
  data() {
    return {
      list: [],
      total: 110, //显示总的记录数，
      currentPage: 1, //当前的页码
      pageSize: 10, //每页显示10条数据
      searchMap: {},
      payTypeOption
    };
  },
  // 初始化获取
  created() {
    this.fetchaData();
    
  },

  components: {},
  methods: {
    fetchaData() {
      // parseInt()表示string转Int ，typeof在js中查看数据类型
      memberApI
        .seach(this.currentPage, this.pageSize, this.searchMap)
        .then(response => {
          const req = response.data;

          console.log("总共条数" + typeof parseFloat(req.data.total));
          console.log("总共条数" + typeof req.data.total);
          console.log("总共条数" + req.data.total);
          this.list = req.data.rows;
          this.total = req.data.total;
          console.log(JSON.stringify(req.data.rows));
          // return req.data;
        });
    },
    handleEdit(id) {
      alert(id);
      
    },
    handleDelete(id) {
      alert(id);
    },
    // 当每页显示条数改变后，被触发、val最新的每页显示条数
    headleSizeChange(val) {
      this.pageSize = val;
         this.fetchaData();
    },
    // 当页码改变后，被触发 ，val是最新的页码
    headleCurrentChange(val) {
      this.currentPage = val;
         this.fetchaData();
    }
  },
  // 自定义一个过滤器
  filters: {
    payTypeFilter(type) {
      // find查找到一条
      // payTypeOption.find(obj=>{
      //  // payTypeOption数组中的type值和传入的type的type值判断，
      // //  如果满足条件就返回obj
      //      return obj.type===type
      // })
      //
      // payTypeOption数组中的type值和传入的type的type值判断，
      //  如果满足条件就返回obj
      // 只有一个表达式的简写方法如下
      const payobj = payTypeOption.find(obj => obj.type === type);
      // 判断payobj的内容,payobj如果为空则返回为空，不为空返回obj数组中的name选项
      return payobj ? payobj.name : null;
    }
  }
};
</script>

<style scoped>
</style>