vue+element实现分页--之--前端分页
效果图:
访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选
官网的完整案例
<div class="block">
<span class="demonstration">完整功能</span>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]" //显示 5条/页的值
:page-size="100"
layout="total, sizes, prev, pager, next, jumper" //分别对应了[共33条, 5条/页,<.......>]
:total="400"> //设置总条数
</el-pagination>
</div>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage1: 5,
currentPage2: 5,
currentPage3: 5,
currentPage4: 4
};
}
}
</script>
demo的使用
<el-table
:data="list"
style="width: 100%"
@selection-change="selectItem">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="用户名" prop="userName" width="150"></el-table-column>
<el-table-column label="用户代码" prop="userCode" width="150"></el-table-column>
<el-table-column label="所属机构代码" prop="comCode" width="140"></el-table-column>
<el-table-column label="用户描述" prop="userDescription" width="300"></el-table-column>
<el-table-column label="用户状态" align="center" prop="userState" width="100">
<template scope="scope">
<div>
<!-- {{ scope.row.userState | userState }}-->
{{scope.row.userState == 0 ? "启用" : scope.row.userState == 1 ? "禁用" : "解锁"}}
</div>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="makeDate" width="140"></el-table-column>
<el-table-column label="操作" width="200" align="center">
<template scope="scope">
<div>
<span>
<router-link :to="{ name: 'usersEdit', params: { id: scope.row.userCode }}"
class="btn-link edit-btn"> 编辑 </router-link>
</span>
<span>
<el-button size="small" type="danger" @click="confirmDelete(scope.row)">删除</el-button>
</span>
</div>
</template>
</el-table-column>
</el-table>
<div class="pos-rel p-t-20">
<btnGroup :selectedData="multipleSelection" :type="'users'"></btnGroup>
<div class="block pages"> <el-pagination
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
layout="total, sizes,prev, pager, next"
:page-sizes="[1, 5,8, 10]"
:page-size="limit"
:current-page="page"
:total="total">
</el-pagination>
</div>
</div>
接着设置data(){ }
data() {
return {
list:[],
tableData: [],
realname: '',
multipleSelection: [],
pagesize: 8,
page:1, //对应el-pagination current-page
limit:5, //和:page-size 对应
total:null, //和:total对应
}
},
请求数据
getAllUsers() {
this.loading = true
const data = {
params: {
realname: this.realname,
page: this.currentPage,
rows: this.limit
}
}//不要了这个是按后台分页所需要的数据
this.apiGet('admincrud/users', data).then((res) => {
console.log('res = ', _g.j2s(res))
this.handelResponse(res, (data) => {
this.tableData = data.list
this.dataCount = data.total
this.pageList()
})
})
},
数据过滤
//处理数据
getList() {
//es6过滤得到满足搜索条件的展示数据list
// let list2 = this.data.filter((item, index) =>
// item.name.includes(this.tableData)
// )
let list=this.tableData;
this.list = list.filter((item, index) =>
index < this.page * this.limit && index >= this.limit * (this.page - 1)
)
this.total = list.length
},
俩个按钮事件的处理函数
// 当每页数量改变
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.limit = val
this.getList()
},
// 当当前页改变
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.page = val
this.getList()
},
vue+element实现前端分页及前端搜索功能
主要他的这个搜索过滤挺好的简单不要重新访问后台,我自己没时间改了,现在把思路过程放这里
见下一篇
atzhang
vue+element实现分页--之--前端分页的更多相关文章
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- Bootstrap table前端分页(ssm版)
说明bootstrap table可以前端分页,也可以后端sql用limit分页.前端分页下性能和意义都不大,故一般情况下不用这种,请看我的另一篇后端分页的博客源码下载地址:https://git.o ...
- EasyUI表格DataGrid前端分页和后端分页的总结
Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...
- Jeasyui的datagrid前端分页要点
Jeasyui的分页有两种方式: 1. 服务器端分页,是真正的分页,datagridview的pager会自动把pageSize和pageNum传到后台,后台根据根据pageSize和pageNum构 ...
- 循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理
在很多列表展示数据的场合中,大多数都会需要一个排序的处理,以方便快速查找排序所需的数据,本篇随笔介绍如何结合ABP后端和Vue+Element前端结合的分页排序处理过程. 1.Vue+Element前 ...
- vue+element的表格分页和前端搜索
1.前端后台管理会存在很多表格,表格数据过多就需要分页;2.前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索3.下面贴上一个demo & ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...
随机推荐
- Redis不是只有get set那么简单
我以前还没接触Redis的时候,听到大数据组的小伙伴在讨论Redis,觉得这东西好高端,要是哪天我们组也可以使用下Redis就好了,好长一段时间后,我们项目中终于引入了Redis这个技术,我用了几下, ...
- csps2019AFO祭
预感可能是我写的最长的博客 Day 0 收拾收拾东西然后来机房各种颓废,因为很懒所以也不想敲板子从luogu随便看了看题就发现不会, 于是愉快的耸题解代码,然后快出发前接受来自各种老师的毒奶... ...
- DOS命令行(5)——Windows系统的配置与管理(下)
whoami --查看当前有效用户 这个工具可以用来获取本地系统上当前用户(访问令牌)的用户名和组信息,以及相应的安全标识符(SID).声明.本地系统上当前用户的权限.登录标识符(登录 ID).例如, ...
- [翻译]在GC上加入DPAD
本文90%通过机器翻译,另外10%译者按照自己的理解进行翻译,和原文相比有所删减,可能与原文并不是一一对应,但是意思基本一致. 译者水平有限,如果错漏欢迎批评指正 译者@Bing Translator ...
- 百炼3752:走迷宫--栈实现dfs
3752:走迷宫 总时间限制: 1000ms 内存限制: 65536kB 描述 一个迷宫由R行C列格子组成,有的格子里有障碍物,不能走:有的格子是空地,可以走.给定一个迷宫,求从左上角走到右下角最 ...
- CSS 奇思妙想 | 全兼容的毛玻璃效果
通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...
- FastApi持续更新
FastAPI 框架,高性能,易于学习,高效编码,生产可用 官方文档: https://fastapi.tiangolo.com FastAPI 是一个用于构建 API 的现代.快速(高性能)的 ...
- 三代码使用QScrollArea
QScrollArea是QT封装好的一个滑动界面类 构造函数如下: 指定一个父对象就行,构造函数提供一个滑动的区域,但是这个区域里是没有内容的,构造函数介绍里面让我们看setWidget()这个函数, ...
- 8、ITSM基本概念(1)
ITSM即是信息技术服务管理: 8.1.什么是服务: 8.2.RACI模型: 谁负责(R =n Resposible),即负责执行任务的角色,他/她具体负责操控项目.解决问题. 谁批准(A = Acc ...
- SpringBoot:SpringBoot中@Value注入失败
1. 第一步检测语法是否正确 @Value("${test}") private String test; 2.第二步检测配置文件中是否有进行配置 url=testusername ...