必威体育Betway必威体育官网
当前位置:首页 > IT技术

ElementUI分页组件+Vue

时间:2019-07-02 21:42:18来源:IT技术作者:seo实验室小编阅读:55次「手机版」
 

elementui

一. 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>
<p id="APP">
</p>
<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>
<p id="app">

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

第二步:定义变量,保存数据

在这里插入图片描述

第三步:修改InitList方法,请求后台数据

在这里插入图片描述

第四步:点击页面条数,更新页面数据

在这里插入图片描述

第五步:点击页码,更新页面数据

在这里插入图片描述

相关阅读

vue引入zTree入门

在vue中引入zTree,和引入其他组件类似,首先在main.js里将以下3个js引入:import "./js/jquery-3.3.1.min.js"; import "../plugins/zT

vue 前端中如何改变图标大小

<i style="font-size: 15px;" class='el-icon-check color-green'></i> 说明:  class='el-icon-check color-green'  : 指定图标

Asp.net之真假分页大揭秘、使用AspNetPager实现真分页

  最近在web界面的时候,遇到了一些非常现实的问题。最让人头疼的问题就是显示数据中的书画作品。这些书画作品都会以图片的形式展

vue学习:v-blind及class与style绑定

文章内容源于《Vue.js实战》 一、了解v-bind指令 首先介绍基本用法和它的语法糖,主要用法是动态更新HTML元素上的属性: <p id="ap

三张表 一对多 分页查询

  三张表 一对多 分页查询   <resultMap id="queryListMap" type="com.mtqg.identify.identifyServer.domain.Order">    

分享到:

栏目导航

推荐阅读

热门阅读