使用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>
View Code

 

三、引入分页组件

<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>
View Code

 

 

posted @ 2020-05-14 10:18  流浪阿丁  阅读(3790)  评论(0)  编辑  收藏  举报