ElementUI分页组件+Vue

一. ElementUI分页组件

1 官网

官网地址：http://element-cn.eleme.io/#/zh-CN

2 入门案例：

第一步：创建vue的基本页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.5.17.js"></script>
</head>
<body>
<div id="app">
</div>
<script>

var vm = new Vue({
   el:"#app"

});


</script>

</body>
</html>

第二步：引入elementUI的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.5.17.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="app">

</div>
<script>

var vm = new Vue({
   el:"#app"

});
</script>
</body>
</html>

第三步：搜索分页组件栏

在这里插入图片描述

复制代码：

<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>

第五步：添加事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue-2.5.17.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


</head>
<body>
<div id="app">

    <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>

var vm = new Vue({
   el:"#app",
   data:{
       currentPage:3,// 当前页码
       pageSize:10,// 每页大小
       total:1000
   },
   methods:{
       //? 长度改变----改变每页显示的条数的时候  自动触发
       handleSizeChange(val){
           console.log("长度改变:"+val)
       },
       // 当前改变----当前页码改变之后，触发这个函数
       handleCurrentChange(val){
           console.log("当前改变："+val)
       }
   }
});
</script>
</body>
</html>

3 整合项目

3.1 .1BaseResult

在这里插入图片描述

public class BaseResult {
    private Long total;
    private Object data;
}

3.2.2 GoodsService

public BaseResult findByPage(Integer page, Integer rows){
    PageHelper.startPage(page,rows);
    List<Goods> list = goodsMapper.select(null);
    PageInfo<Goods> info = new PageInfo<>(list);

    BaseResult baseResult = new BaseResult();
    baseResult.setTotal(info.getTotal());
    baseResult.setData(info.getList());

    return baseResult;
}

3.2.3 GoodsController

@GetMapping
    public ResponseEntity<BaseResult> findByPage(Integer page,Integer rows){
        BaseResult baseResult = goodsService.findByPage(page, rows);
        return new ResponseEntity<>(baseResult,HttpStatus.OK);
    }

3.3.4Goods.html页面

第一步：引入ElementUI库文件

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

第二步：引入分页组件内容

<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>