使用Vue+ElementUI实现前端分页

背景

项目中要做一个公共的附件展示列表，针对某个模块某条记录展示，因此附件不会是大数据量，采用前端分页，使用Vue.JS+ElementUI布局展示,axios请求数据。

步骤

一、Html页面中引入JS、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>

三、引入分页组件

<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来制作表格的时候,遇到了一些小问题,记录方便学习. 其中两个事件是关于切换当前页和切换显示的列表条数的.另外的属性 ...

随机推荐

ES检索服务搜索结果高亮
一.前言在实际使用中搜索结果中的关键词前端通常会以特殊形式展示,比如标记为红色使人一目了然.我们可以通过 ES 提供的高亮功能实现此效果. 二.代码实现前文查询是通过一个继承 Elasticsea ...
Edge缓存清理操作说明
1. 打开Edge浏览器 2. 点击屏幕右上角三个点的按钮 3. 在出现的菜单里面选择"设置" 4. 在出现页面里面左侧选择"隐私.搜索和服务",然后右侧点击& ...
buck电路 & boost电路
buck电路 buck电路是直流的降压电路,我们下面给大家讲下,如何把12V的直流电压降压成5V的直流电压 1.buck电路拓扑:12V----->5V 2.降压原理 a.开关闭合,电流走向电 ...
搞人工智能开源大语言模型GPT2、Llama的正确姿势
(如果想及时收到人工智能相关的知识更新,请点击关注!!) 序言:目前我们每一小节的内容都讲解得非常慢,因为这是人工智能研发中的最基础知识.如果我们不能扎实掌握这些知识,将很难理解后续更复杂且实用的概念 ...
MySQL查询BLOB类型的字段
1.MySQL有四种BLOB类型: 1.TinyBlob 最大能容纳255B的数据 2.Blob 最大能容纳65KB的 3.MediumBlob 最大能容纳16MB的数据 4.LongBlob 最大能 ...
一个.NET开源、轻量级的运行耗时统计库 - MethodTimer
前言在.NET开发中,为了准确统计对应方法的执行时间,我们最常用的方式是手动使用 Stopwatch 来显式编写计时逻辑,但是假如你需要大量的使用 Stopwatch 来进行耗时统计的话不利于保持代 ...
chcapter 11 熵和信息
Entropy and information 熵:度量一个物理系统中的态的不确定度. 注意: 文中出现的' 凸性' convexity 和 ' 凹性' concavity 的在不同的教材中可能含义 ...
Nginx服务器配置---反向代理服务时proxy_pass的转发规则
nginx是由俄罗斯开发的一款http web服务器,我们经常用这款服务器做负载均衡和反向代理.今天我们就来聊聊Nginx作为反向代理时,如何进行路由配置.假设你已经部署好Nginx了,我们进入Ngi ...
linux虚拟ip原理
在 Linux 中,虚拟 IP(Virtual IP,VIP)是指一组与物理网络接口卡 (NIC) 绑定的虚拟 IP 地址,这些 IP 地址并不是物理上存在的,而是通过软件模拟实现的. Linux 实 ...
python之Marshmallow
文档说明:https://marshmallow.readthedocs.io marshmallow是一个用来将复杂的orm对象与python原生数据类型之间相互转换的库,简而言之,就是实现obje ...

使用Vue+ElementUI实现前端分页

使用Vue+ElementUI实现前端分页的更多相关文章

随机推荐

热门专题