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

@GetMappingpublic 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方法，请求后台数据

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

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

ElementUI分页组件+Vue相关推荐

用vue element-ui分页组件构建一个简单的分页 ( 超详细 )
element-ui分页组件: 以下代码都是干货,欢迎大家互相评论学习方法一数据绑在div上: <template> <div><div v-for="(v ...
elementUI 分页组件Bug ，为什么会 infinity ？
个人项目经验总结: 是因为后台的原因,逻辑少走了一层. 而前端页面初次加载的时候直接提交默认参数,然后后台没有按照提交的参数一致性response返回给前端,而是后台自定义的参数值返回给前端渲染的,所 ...
elementUI 分页组件的使用 - 踩坑篇
elementUI 分页组件的使用.API调用.获取服务端数据.并初始化渲染页面:(踩坑一则) 因每个公司 / 每个项目 / 客户需求 / 都各有差异,所以本例只是demo说解,并非举一反三或万能分页 ...
vue-cli使用element-ui分页组件
vue-cli安装element-ui并使用分页组件根据element-ui的官方文档官网地址:http://element.eleme.io/#/zh-CN 使用npm或者cnpm(淘宝 ...
elementUI分页组件实现表格数据序号累加功能
文章目录前言一.基本结构二.效果预览总结前言 Vue项目借助elementUI开发后台管理系统时,遇到的一个需求,就是每页展示5条数据,数据序号为1-5,下一页就需要从6开始,以此类推-一起 ...
Element-UI分页组件超详细使用示例
为查询按钮绑定查询方法,也就是click点击事件绑定: 为分页组件绑定查询方法: 搜索官方提供的示例:
elementui分页组件按钮样式修改_Vue使用Elementui修改默认最快方法！
相信大家都需要过,在Vue中使用Elementui的时候,遇到最多也最蛋疼的问题就是修改默认样式,接下来直奔主题: // template :text-inside="true" ...
ElementUI分页组件的封装
1.准备封装创建index.vue 路径:src-->components-->Pagination-->index.vue <template><div :cl ...
Element-UI分页组件使用——点第几页查第几页
点第几页查第几页效果实现:其实就是传递了页码参数给组件

ElementUI分页组件+Vue

一. ElementUI分页组件

1 官网

2 入门案例：

3 整合项目

3.1 .1BaseResult

3.2.2 GoodsService

3.2.3 GoodsController

3.3.4Goods.html页面

ElementUI分页组件+Vue相关推荐

最新文章

热门文章