element ui分页怎么做_elementUI实现分页
分页的两种方式。前端分页,后端分页。两种方式各有个的优缺点吧。
前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理。但数据量不能太大,因为前端是先一次性加载所有数据,然后在做分页处理。在数据量多的情况下,加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。
后端分页:因为是后端分页,前端在每点击一次分页时,便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据
一、在elementUI中将表格、分页引入自己的页面中
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
// 默认显示第一条
currentPage:1
}
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
}
实现一个简单表格,在做分页时,数据尽可能在10-20条,方便演示
二、分页部分(分页分前端分页与后端分页)
前端分页(在一的基础上添加分页功能)
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
export default {
data(){
return {
// 总数据
tableData:[],
// 默认显示第几页
currentPage:1,
// 总条数,根据接口获取数据长度(注意:这里不能为空)
totalCount:1,
// 个数选择器(可修改)
pageSizes:[1,2,3,4],
// 默认每页显示的条数(可修改)
PageSize:1,
}
},
methods:{
getData(){
// 这里使用axios,使用时请提前引入
axios.post(url,{
orgCode:1
},{emulateJSON: true},
{
headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
}
).then(reponse=>{
console.log(reponse)
// 将数据赋值给tableData
this.tableData=data.data.body
// 将数据的长度赋值给totalCount
this.totalCount=data.data.body.length
})
},
// 分页
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.PageSize=val
// 注意:在改变每页显示的条数时,要将页码显示到第一页
this.currentPage=1
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage=val
},
},
created:function(){
this.getData()
}
}
后端分页(在一的基础上添加分页功能)
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
export default {
data(){
return {
// 总数据
tableData:[],
// 默认显示第几页
currentPage:1,
// 总条数,根据接口获取数据长度(注意:这里不能为空)
totalCount:1,
// 个数选择器(可修改)
pageSizes:[1,2,3,4],
// 默认每页显示的条数(可修改)
PageSize:1,
}
},
methods:{
// 将页码,及每页显示的条数以参数传递提交给后台
getData(n1,n2){
// 这里使用axios,使用时请提前引入
axios.post(url,{
orgCode:1,
// 每页显示的条数
PageSize:n1,
// 显示第几页
currentPage:n2,
},{emulateJSON: true},
{
headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
}
).then(reponse=>{
console.log(reponse)
// 将数据赋值给tableData
this.tableData=data.data.body
// 将数据的长度赋值给totalCount
this.totalCount=data.data.body.length
})
},
// 分页
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.PageSize=val
// 点击每页显示的条数时,显示第一页
this.getData(val,1)
// 注意:在改变每页显示的条数时,要将页码显示到第一页
this.currentPage=1
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage=val
// 切换页码时,要获取每页显示的条数
this.getData(this.PageSize,(val)*(this.pageSize))
},
},
created:function(){
this.getData(this.PageSize,this.currentPage)
}
}
注:后台分页等待验证
问题
当前端分页时,页面上的弹框会将已经勾选的数据清空,拿不到已被勾选的数据。这个问题还需要解决,希望各位大神的帮助!!
element ui分页怎么做_elementUI实现分页相关推荐
- element ui 多个子组件_ElementUI 技术揭秘(2) 组件库的整体设计
需求分析 当我们去实现一个组件库的时候,并不会一上来就撸码,而是把它当做产品一样,思考一下我们的组件库的需求.那么对于 element-ui,除了基于 Vue.js 技术栈开发组件,它还有哪些方面的需 ...
- element ui走马灯怎么添加_element-ui对话框与走马灯一起用
一.需求分析 通过点击一组图片中的某一张图片,显示出当前的图片在对话框中,并可以通过走马灯的方式左右切换出其他图片,图片大小和对话框大小为自适应 二.实现步骤 1.布局代码 :src="it ...
- element ui 菜单右侧展开_Elementui Vue 菜单固定展开的问题
父组件 :default-active="activeMenu" class="el-menu-vertical-demo" background-color= ...
- element ui框架(准备)
和vue代码配合最好的ui框架,基本上就是element ui了.做前端开发的同学,只要用到vue,就会使用到element ui.这和bootstrap有点相像,早期的时候用到jquery,基本就会 ...
- element ui 对话框改 模仿苹果手机 预览视图
修改了一下 element ui的对话框 做一个手机模拟预览的样式 <!-- 预览 --><div class="look_box"><el-dial ...
- vue使用element ui实现下拉列表分页的功能!!!
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 前几天做了个功能,需求是使用利用element ui如何给下拉列表分页,经过网上查找,自己摸索,已经完成,今天来记录一 ...
- 【前端】Vue+Element UI案例:通用后台管理系统-用户管理:Table表格增删查改、Pagination分页、搜索框
文章目录 目标 代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式 总 ...
- vue:element ui分页改变pageSize,触发两次回调请求
1.描述: 使用element pagination组件时,如果你的currentPage在靠后的页数,这时改变pageSize,那么可能导致size-change和current-change事件同 ...
- element ui——Pagination 自定义分页样式
我们可以看到,element ui Pagination分页默认样式 直接显示 首页 - 中间页 - 末页,但当项目中数据量过大时,用户直接点击最后一页 可能会导致后端elk崩溃.项目最后要求 不能把 ...
最新文章
- html中右侧三角形代码,html – 使用CSS边框的三角形和倒三角形
- Effective C++条款39: 避免 向下转换 继承层次
- .net core 使用 codegenerator 创建默认CRUD代码
- LVS+Keepalive 实现负载均衡高可用集群
- 微型计算机接口技术常见问题,《微型计算机接口技术及应用》期末考试试卷及问题详解(64页)-原创力文档...
- 感知算法论文(二)Pelee: A Real-Time Object Detection System on Mobile Devices(2018)译文
- python int函数 向上取整_【Python小课】 print()函数
- 如何用maven tycho构建自己的Eclipse RCP应用
- sm缩写代表什么意思_PE给水管常见的字母缩写都代表什么?
- js中this理解。
- activity劫持反劫持
- 同构数的算法——C语言
- Android Q Data Setup for Short Connection
- 《巴黎圣母院》 1.大厅 解读
- 小白装系统(超详细)
- where和group by能一起使用吗?
- 你真的知道什么是置信区间吗?
- 汽车计算机控制系统及其组成,汽车计算机控制系统的研究.doc
- 强大的社工之-重庆黑客联盟
- winds搭建bugfree环境