ElementUI分页组件+Vue

痛定思痛。 2022-04-17 06:42 350阅读 0赞

## 一. 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的组件

第三步：搜索分页组件栏

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 1]

复制代码：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 2]

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>

第二步：定义变量，保存数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 3]

第三步：修改InitList方法，请求后台数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 4]

第四步：点击页面条数，更新页面数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 5]

第五步：点击页码，更新页面数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70]: /images/20220417/e904916c0b1d4ec4ad40b435a2b287e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 1]: /images/20220417/63955e5376a44b148b58bc5047076d2c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 2]: /images/20220417/2dca89ccdfa3468184decaac51e34253.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 3]: /images/20220417/0c5707f138c1407fb0842a1fef218f6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 4]: /images/20220417/c2f599bfb13c4e9394378d705017ef7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 5]: /images/20220417/d45895c785eb4cf2b43aed43c241eb70.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNTA5_size_16_color_FFFFFF_t_70 6]: /images/20220417/2907551f3cf74bc5a235b183fdf44c33.png