使用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来制作表格的时候,遇到了一些小问题,记录方便学习. 其中两个事件是关于切换当前页和切换显示的列表条数的.另外的属性 ...
随机推荐
- vue中ref的用法
用法1. vue给我们提供一个操作dom的属性,ref.绑定在dom元素上时,用起来与id差不多,通过this.$refs来调用: <div ref="test">te ...
- CSS动画（波光粼粼登录页面）
1.整体效果 https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa4AbemkU3vLRIDzTIgPHSjicia97wfvMVAhqZL4lsGbQQCbsV ...
- SVN上的修改提交时间、作者以及简单的SVN操作说明
情况说明 因为部分SVN记录上传时间不符合规范,需要修改因此有这个需求.默认情况下SVN是不允许修改时间和作者信息,需要服务器进行配置. 一.服务的配置变更 我用的是Windows版本,在这个地方配置 ...
- 初识GO语言--流程控制
- The 2024 ICPC Asia East Continent Online Contest (II) K.Match
题面 K.Match 给定长度为 \(n\) 的两个序列 \(a\) 和 \(b\),当且仅当 \(a_i ⊕ b_j ≥ k\) 时,\(a_i\) 与 \(b_j\) 连一条双向边,其中 \(⊕\ ...
- 基于antlr的表达式解析器——函数类型验证
package daicy.formula.evaluator; import java.util.HashMap; import java.util.Map; import org.antlr.ru ...
- Displaying XML in a Swing JTree
Overview It seems obvious enough: You have an XML document or fragment. XML is hierarchical. A Swing ...
- 在线文档-Wiki平台
GitBook 对于在线文档创作平台,当然还是首推GitBook GitBook为免费用户提供 10个空间(可以私有也可以公开) 支持自定义域名 gitbook本身是一个开源项目,你可以下载源代码自行 ...
- 支付宝支付功能接入(PC)
在使用支付宝支付功能开发的阶段, 可以在沙箱环境下进行开发, 开发完成之后, 到线上再进行相关参数的替换即可 一. 登陆支付宝开放平台(https://open.alipay.com/platform ...
- Vscode之常用插件
code runner 可以直接在编辑器中运行代码,查看结果,非常方便,一键运行. PHP Intelephense PHP代码提示工具,支付代码提示.查找定义.类搜索等功能,非常强大. php de ...