Vue+ElementUI 实现分页查询展示

Vue+ElementUI 实现分页查询展示

ElementUI分页组件代码

最完整的分页完整功能

 <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>

在data里面定义用到的数据:

     //获取用户列表的参数对象
     queryInfo: {
      query: "",
      //当前页数
      pagenum: 1,
      //每页数据大小
      pagesize: 2,
     },
     
     //总数据量
     total: 0,
     //数据
     userList: []

在methods里面定义两个方法用于监听pagesize和pagenum的改变

   // 监听pagesize改变的事件
   handleSizeChange(newSize) {
     this.queryInfo.pagesize = newSize;
     this.getGoodsList();
   },
   
   //监听多少页值改变的事件
   handleCurrentChange(newPage) {
     this.queryInfo.pagenum = newPage;
     this.getGoodsList();
   }

请求接口文档：

用户数据列表

• 请求路径：users
• 请求方法：get
• 请求参数

参数名	参数说明	备注
query	查询参数	可以为空
pagenum	当前页码	不能为空
pagesize	每页显示条数	不能为空

• 响应参数

参数名	参数说明	备注
totalpage	总记录数
pagenum	当前页码
users	用户数据集合

• 响应数据

{
    "data": {
        "total": 5,
        "pagenum": 4,
        "users": [
            {
                "id": 25,
                "username": "tige117",
                "mobile": "18616358651",
                "type": 1,
                "email": "tige112@163.com",
                "create_time": "2017-11-09T20:36:26.000Z",
                "mg_state": true, // 当前用户的状态
                "role_name": "炒鸡管理员"
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

在methods里面定义发送请求的方法

     async getUserList() {
      //将方法获取到的data 数据转义为 res
      const { data: res } = await this.$http.get("/users", {
        params: this.queryInfo,
      });

      if (res.meta.status !== 200)
       return this.$message.error("获取用户列表失败!");
      this.userList = res.data.users;
      this.total = res.data.total;
    },

通过table进行数据展示

 <!-- 用户列表区 -->
 <el-table :data="userList" style="width: 100%" border stripe>
   <el-table-column type="index"></el-table-column>
   <el-table-column prop="username" label="姓名"></el-table-column>
   <el-table-column prop="email" label="邮箱"></el-table-column>
   <el-table-column prop="mobile" label="电话"> </el-table-column>
   <el-table-column prop="role_name" label="角色"> </el-table-column>
   <el-table-column prop="mg_state" label="状态">
 </el-table>