使用Vue+ElementUI实现前端分页
背景
项目中要做一个公共的附件展示列表，针对某个模块某条记录展示，因此附件不会是大数据量，采用前端分页，使用Vue.JS+ElementUI布局展示,axios请求数据。
步骤
一、Html页面中引入JS、CSS
<!-- 引入JS -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import element-ui JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- import axios JavaScript -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
建议直接下载js文件到本地，在引入到页面。
二、页面中添加ElementUI的表格
根据项目的需要可以自行选择：https://element.eleme.cn/#/zh-CN/component/table
1 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.foton_fileoldname.toLowerCase().includes(search.toLowerCase()))" border stripe fit empty-text="暂无数据"
2 style="width: 100%">
3 <el-table-column prop="foton_obsfilesid"
4 label="ID"
5 v-if="isIDShow">
6 </el-table-column>
7 <el-table-column label="文件名称"
8 prop="foton_fileoldname">
9 </el-table-column>
10 <el-table-column label="附件所属类型"
11 prop="foton_type">
12 </el-table-column>
13 <el-table-column label="上传时间"
14 prop="createdon">
15 </el-table-column>
16 <el-table-column align="right">
17 <template slot="header" slot-scope="scope">
18 <el-input v-model="search"
19 size="mini"
20 placeholder="输入关键字搜索" />
21 </template>
22 <template slot-scope="scope">
23 <el-button size="mini" icon="el-icon-search" circle
24 @click="handleEdit(scope.$index, scope.row)"></el-button>
25 <el-button size="mini"
26 @click="handleEdit(scope.$index, scope.row)">下载</el-button>
27 <el-button size="mini"
28 type="danger"
29 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
30 </template>
31 </el-table-column>
32 </el-table>
三、引入分页组件
<div class="block" style="float:right">
<span class="demonstration"></span>
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
background
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
分页组件的使用,详细见ElementUI官网
四、JS数据与方法
表格的数据绑定不必多说，通过axios请求数据绑定到tableData集合，表格列prop与集合字段保持一致即可。
前端分页相关是重点，pageSize、pageSizes、currentPage、total字段：
data: {
pageSize: 10,
pageSizes: [5, 10, 15, 20, 30, 40, 50], // select选项设置：条/页
currentPage: 1,
total: 0,
}
分页组件方法：
handleSizeChange(val) {
this.pageSize = val;
},
handleCurrentChange(val) {
this.currentPage = val;
},
前端分页实现核心就是，el-table组件的data对象数组，通过数组的slice方法，从已有的数组中返回选定的元素。
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)“
还可以在进行过滤筛选：
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.foton_fileoldname.toLowerCase().includes(search.toLowerCase()))"
至此，使用Vue+ElementUI实现前端分页就实现了。
效果如下:
拓展
附上完整的代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Obs文件列表</title>
6 <!-- 引入样式 -->
7 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
8 </head>
9 <body>
10 <div id="app">
11 <el-button @click="visible = true">模态框按钮</el-button>
12 <el-dialog :visible.sync="visible" title="提示">
13 <p>模态框</p>
14 </el-dialog>
15 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize).filter(data => !search || data.foton_fileoldname.toLowerCase().includes(search.toLowerCase()))" border stripe fit empty-text="暂无数据"
16 style="width: 100%">
17 <el-table-column label="文件名称"
18 prop="foton_fileoldname">
19 </el-table-column>
20 <el-table-column label="类型"
21 prop="filetype">
22 </el-table-column>
23 <el-table-column label="上传时间"
24 prop="createdon">
25 </el-table-column>
26 <el-table-column align="right">
27 <template slot="header" slot-scope="scope">
28 <el-input v-model="search"
29 size="mini"
30 placeholder="输入关键字搜索" />
31 </template>
32 <template slot-scope="scope">
33 <el-button size="mini"
34 @click="handleEdit(scope.$index, scope.row)">下载</el-button>
35 <el-button size="mini"
36 type="danger"
37 @click="handleDelete(scope.$index, scope.row)">删除</el-button>
38 </template>
39 </el-table-column>
40 </el-table>
41 <div class="block" style="float:right">
42 <span class="demonstration"></span>
43 <el-pagination @size-change="handleSizeChange"
44 @current-change="handleCurrentChange"
45 :current-page="currentPage"
46 :page-sizes="pageSizes"
47 :page-size="pageSize"
48 background
49 layout="total, sizes, prev, pager, next, jumper"
50 :total="total">
51 </el-pagination>
52 </div>
53 </div>
54 <!-- import Vue before Element -->
55 <script src="https://unpkg.com/vue/dist/vue.js"></script>
56 <!-- import JavaScript -->
57 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
58 <script>
59 new Vue({
60 el: '#app',
61 data: {
62 visible: false,
63 tableData: [],
64 search: '',
65 pageSize: 10,
66 pageSizes: [5, 10, 15, 20, 30, 40, 50], // select选项设置：条/页
67 currentPage: 1,
68 total: 0,
69 },
70 created: function () {
71 this.getObsFilelist();
72
73 },
74 mounted: function () {
75
76 },
77 methods: {
78 handleEdit(index, row) {
79 console.log(index, row);
80 },
81 handleDelete(index, row) {
82 console.log(index, row);
83 },
84 handleSizeChange(val) {
85 this.pageSize = val;
86 },
87 handleCurrentChange(val) {
88 this.currentPage = val;
89 },
90 getObsFilelist: function () {
91 var _this = this;
92 var entity = {
93 EntityId: _this.entityId,
94 EntityName: _this.entityName
95 };
96 axios.post(_url, entity).then(function (response) {
97 console.log(response);
98 console.log(response.data);
99 if (response.data.code == 1) {
100 _this.tableData = response.data.data;
101 _this.total = response.data.data.length;
102 }
103
104 }).catch(function (error) {
105 console.log(error);
106 });
107 //模拟数据
108 for (var i = 0; i < 120; i++) {
109 var obj = {
110 createdon: '2016-05-02',
111 foton_fileoldname: '测试obs文件' + i,
112 filetype: '类型' + i
113 };
114 _this.tableData.push(obj);
115 }
116 _this.total = 120;
117 }
118 },
119 });
120 </script>
121 </body>
122 </html>
使用Vue+ElementUI实现前端分页的更多相关文章
- vue+element-ui实现前端分页
按照他的文档来写分页 最主要的是 el-table里面展示的数据怎么处理 <el-table :data="AllCommodityList.slice((currentPage-1 ...
- 关于vue+element-ui项目的分页，返回默认显示第一页的问题解决
关于vue+element-ui项目的分页,返回默认显示第一页的问题解决 问题描述 当前页面如下: 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面 然后在新页面点击返回按钮,返 ...
- elementUI实现前端分页
按照他的文档来写分页,最主要的是el-table里面展示的数据怎么处理 <el-table :data="AllCommodityList.slice((currentPage-1)* ...
- Vue element-ui：滚动条 分页 禁用选项
1.滚动条设置: <el-scrollbar style="height:100%;">.......</el-scrollbar> 默认会同时出现水平和垂 ...
- vue+element实现分页--之--前端分页
效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...
- vue+element-ui实现表格checkbox单选
公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,check ...
- dotnetcore+vue+elementUI 前后端分离 三（前端篇）
说明: 本项目使用了 mysql employees数据库,使用了vue + axois + element UI 2.0 ,演示了 单页程序 架构 ,vue router 的使用,axois 使用, ...
- vue+element-ui 实现分页（根据el-table内容变换的分页）
官方例子 官方提示: 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示.prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,si ...
- spring boot + vue + element-ui全栈开发入门——前端列表页面开发
一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN ...
- vue Element-UI 分页使用(1)
最近在使用Element-UI这套框架配合Vue来写前端页面.在用Element-UI来制作表格的时候,遇到了一些小问题,记录方便学习. 其中两个事件是关于切换当前页和切换显示的列表条数的.另外的属性 ...
随机推荐
- nginx配置tomcat的反向代理记录
tomcat环境安装 (1)在 liunx 系统安装 tomcat,使用默认端口 8080 * tomcat 安装文件放到 liunx 系统中,解压, tar -xzvf tomcat.xxx * 进 ...
- vite 设置网络代理
参考文档:vite 官网.node-http-proxy 完整示例: export default defineConfig({ server: { proxy: { // 字符串简写写法 '/foo ...
- 今日一学，5道大厂的Java基础面试题
前言 各种框架眼花缭乱,各种逻辑需求,CRUD.久而久之,写的1000行代码中都是if else,@autowired等等,等出去面试的时候,基础题不断,而且还是不常用,或者说不在意的,往往这些就容易 ...
- 题解： CF768D Jon and Orbs
题解:CF768D Jon and Orbs 一句话题面:有k种不同的物品,每天等概率任取一种(不一定是新的种类).q组询问,每组给出一个p,问取完这k件物品的概率不小于\(\frac{p}{2000 ...
- 2.15 Linux中一切皆文件[包含优缺点]
Linux 中所有内容都是以文件的形式保存和管理的,即一切皆文件,普通文件是文件,目录(Windows 下称为文件夹)是文件,硬件设备(键盘.监视器.硬盘.打印机)是文件,就连套接字(socket). ...
- OpenMM的安装与使用
技术背景 OpenMM是一款基于Python开发的开源分子动力学模拟软件,这几年因为AlphaFold的缘故,使得这个软件的热度有了不少提升.并且可以使用GPU硬件加速,所以性能上也不赖.这里介绍一下 ...
- canvas绘制--圆角多边形
context.arcTo() arcTo() 方法在画布上创建介于两个切线之间的弧/曲线. JavaScript 语法: context.arcTo(x1,y1,x2,y2,r); 参数描述 参数 ...
- docker部署java项目
1.首先你需要提前准备好jar包或者war包,并想办法放入Linux环境(或虚拟机)中: 2.java项目的部署需要用到Tomcat或者Jetty,docker可以直接拉取他俩的镜像,这里以Tomca ...
- java应用详解
java应用详解 文档介绍: 1.nio应用(ServerSocketChannel.FileChannel). 2.优化jvm参数提升eclipse运行速度. 3.maven3.0.3安装及入门例子 ...
- HZNUOJ-1503公路乘车--DP
题目传送门:https://acm.hznu.edu.cn/OJ/problem.php?id=1503 题解:我们发现后一状态由前一状态决定,即后一公里由前面十公里的状态决定,经典 dp,我们直接列 ...