Vue使用Element-UI实现分页效果_vue elementui 分页

前言

分页在展示数据列表的场景肯定是非常多的。

一般的项目开发中，数据量特别大，一般都是后端接口直接处理分页返回，前端直接调用即可。

但是前端也是可以不需要借助后端，自己也是可以处理分页的。今天我这个后端开发就站在前端的角度上，处理列表分页。

友情提示：

数据量大的情况下一定要后端处理分页，前端虽然可以实现，但是仅限数据量不是特别大的情况下！

先给大家看下我的列表，一个特别单纯的列表，只是返回一个用户列表，并且根据id倒叙排序。

给大家调用看下吧，一个很简单的结构：

技术选项:Pagination

这里我选择使用的是element-ui的分页：Pagination

它是ElementUI下的一个组件：

它的参数特别重要，我们就是借助这些参数实现的分页

以下案例我只是挑选个别参数，更多参数使用说明相间文档

文档：ElementUI-Pagination 分页

大家根据自己的需求挑选一款即可，挑选不出来心仪可以参考我这一套，我也是精心挑选并且测试了很多参数。

增加分页代码

把这一块加到页面上，就有一个视觉上的分页效果了。

相关代码：

 <!-- 分页 -->
    <!-- 
        @size-change //  pageSize 改变时会触发 每页条数
        @current-change //  currentPage 改变时会触发 当前页
        :current-page //  默认false
        background//  是否为分页按钮添加背景色
        :page-sizes // 每页显示个数选择器的选项设置 这是下拉框可以选择的，每选择一行，要展示多少内容 类似：[10, 20, 30, 40, 50, 100]
        page-sizes=显示当前行的条数
        layout // 组件布局，子组件名用逗号分隔
       :total // 总条目数,一般从展示列表的总数获取
     -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="[1,3,5,10,20]"  
      :page-size="pagesize"         
      layout="total, sizes,  prev, pager, next, jumper" 
      :total="userTableData.length">   
    </el-pagination>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

注意代码位置，我是把分页放在table下面了：

初始化数据

紧接着还要定义默认页和默认每页条数，以及数据列表

userTableData我是用过接口返回值赋值的。

  data() {
    return {
      userTableData: [], // 用户列表
      currentPage:1, // 初始页
      pagesize:10,  // 初始每页的数据
    };
  },
1
2
3
4
5
6
7

回调函数

然后就是对分页改变做出的回调函数：

逻辑写死即可，函数名需要和上面保持一致，通常直接复制即可。

 // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
1
2
3
4
5
6
7
8
9

到了这里你就可以看到列表分页了，但是会发现实际展示的数据和分页展示的不一致，不要着急，就差最后一步了 ！

指定table分页

出现上面这种情况，是因为列表的data没有适配分页属性:

你现在的代码肯定是这样的：

最后一步，给要展示的table指定分页以及条件。

一行代码：

 :data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
1

查看效果

这样就一个由前端代码实现的分页就完成了。我们检测下吧

初始化页面

因为我默认展示的就是第一页，并且每页展示10条嘛，所以就是这样的：

切换每页条数：

大概就是这样的，大家下去自己研究玩吧。

以下为我这个组件的全部代码，大家灵活cv即可：

<template>
  <div>
      <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 数据管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb> -->
    <el-button type="primary" icon="el-icon-circle-plus" >新增用户</el-button>
    <!-- 用户列表 -->
    <!-- 
      data 显示的数据   这里增加了分页功能
      highlight-current-row 是否要高亮当前行 默认false
      border 是否带有纵向边框 默认false
      stripe 是否为斑马纹 默认false
      fit 列的宽度是否自撑开	默认true
      cell-style 通过回调函数逻辑操作增加style样式
     -->
    <el-table 
      :data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"  
      highlight-current-row 
      border 
      stripe
      fit 
      :cell-style="cellStyle"  >
    <!-- 自定义索引 --> 
      <el-table-column label="序号" type="index" width="50" align="center" :index="indexMethod"></el-table-column>
      <!-- <el-table-column prop="id" label="id" width="90" align="center"></el-table-column> -->
      <!-- 用户名 -->
      <!-- 
        prop  字段值
        label 字段名称
        width 宽度
        align 是否剧中
       -->
      <el-table-column prop="userName" label="姓名"  width="80" align="center" ></el-table-column>
      <!-- 性别 0女1男 -->
      <el-table-column label="性别" width="50" align="center" prop="sex" heign>
        <template slot-scope="scope">
          <!-- scope.row就是这一行的全部数据 动态判断性别字典 -->
          {{ scope.row.sex === 0 ? "女" : "男"}}
        </template>
      </el-table-column>
      <!-- <el-table-column prop="account" label="账号"  width="150" align="center"></el-table-column>
      <el-table-column prop="password" label="密码" width="100" align="center"></el-table-column> -->
       <!-- 头像 -->
      <el-table-column prop="imnage" label="头像" width="90"  align="center"></el-table-column>
      <!-- 手机号 -->
      <el-table-column prop="phone" label="手机号" width="150" align="center">
        <!-- 给内容增加一个icon图标 -->
        <template slot-scope="scope">    
            <i class="el-icon-phone"></i>
            <span style="margin-left: 10px">{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <!-- 备注 -->
      <el-table-column prop="remark" label="备注" width="190" align="center"></el-table-column>
      <!-- 账号状态 -->
      <el-table-column label="账号状态" width="80" align="center" prop="status">
        <template slot-scope="scope">
          {{scope.row.status === 0 ? "正常" : "禁用"}}
        </template>
      </el-table-column>
      <!-- 生日 -->
      <el-table-column   prop="birthday" label="生日" width="200" align="center" sortable>
       <template slot-scope="scope">    
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{scope.row.birthday}}</span>
      </template>
      </el-table-column>
      <!-- 操作列  -->
      <!-- fixed 列是否固定在左侧或者右侧，true 表示固定在左侧  可选:true, left, right -->
    <el-table-column fixed="right"  label="操作"  width="220" align="center" >
      <template slot-scope="scope"> 
        <!--
           scope.row就是这一行的数据  
           size 尺寸 medium / small / mini
           type 类型 	primary / success / warning / danger / info / text
           icon 图标类名
        -->
        <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete"  size="small" >删除</el-button>
        <el-button type="warning" icon="el-icon-edit" size="small">编辑</el-button>
      </template>
    </el-table-column>

      <!-- <el-table-column
      prop="createTime"
      label="创建时间"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="updateTime"
      label="修改时间"
      width="180"
    ></el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <!-- 
        @size-change //  pageSize 改变时会触发 每页条数
        @current-change //  currentPage 改变时会触发 当前页
        :current-page //  默认false
        background//  是否为分页按钮添加背景色
        :page-sizes // 每页显示个数选择器的选项设置 这是下拉框可以选择的，每选择一行，要展示多少内容 类似：[10, 20, 30, 40, 50, 100]
        page-sizes=显示当前行的条数
        layout // 组件布局，子组件名用逗号分隔
       :total // 总条目数,一般从展示列表的总数获取
     -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      background
      :page-sizes="[1,3,5,10,20]"  
      :page-size="pagesize"         
      layout="total, sizes,  prev, pager, next, jumper" 
      :total="userTableData.length">   
    </el-pagination>
  </div>
</template>

<script>
// 引入axios
import axios from "axios";
export default {
  name: "User",
  data() {
    return {
      userTableData: [], // 用户列表
      currentPage:1, // 初始页
      pagesize:10,  // 初始每页的数据
    };
  },
  methods: {
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
    //改变表格某一列或者某一个单元格文本颜色 
    cellStyle({row, column, rowIndex, columnIndex}) {
      // 定义样式变量
      let cellStyle;
      // 根据每一行的status属性的值进行判断
      // 如果是正常就展示以绿色字体展示，如果是禁用就以红色颜色展示
      switch(row.status) {
        // 0代表正常
          case 0:
            // 设置文本颜色 绿色 可以直接写颜色编码，也可以直接写颜色的单词
            cellStyle = 'color:#70DB93';
            break;
            // 0代表金禁用
          case 1:
            // 设置文本颜色 红色
            cellStyle = 'color:red';
            break;
            // 如果有其他状态，就默认显示，不给文本颜色
          default:
          cellStyle = '';
      }
        
        //return cellStyle  // 返回最终处理过的样式 这样写就是让全部行被style修饰
        // 返回最终处理过的样式 只让账号状态这个属性的属性被style修饰
         if(column.label == '账号状态'){
          return cellStyle
        }
    },
    // 展示用户列表      
    queryUserList() {
       axios.get('http://localhost:9090/user/queryList', {
          // 传递的参数
          params: {
          
          }
          // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
          }).then(res =>{
            // 请求成功后的数据返回给用户列表用于展示
             this.userTableData = res.data.data;
          }).catch(error =>{
             console.log(error)
          })
    },
    // 序列自增
    indexMethod(index) {
      // 每次自增1 可灵活修改
      return (index += 1);
    },
    // 删除
    handleDelete(row) {
        // 确认框确认是否要删除
        this.$confirm("确定要删除"+row.userName+"吗?", "删除提示", {
          iconClass: "el-icon-question", //自定义图标样式
          confirmButtonText: "残忍删除", //确认按钮文字
          cancelButtonText: "留你小命", //取消按钮文字
          showClose: true, //是否显示右上角关闭按钮  默认false
          type: "warning", //提示类型  success/info/warning/error
          //center:"true", //文字居中 默认false
      }).then(res=> {  //选择确认按钮进入此方法
          //确认操作 请求删除接口
         axios.get('http://localhost:9090/user/delete', {
          // 传递的参数
          params: {
            id:row.id //id,从row获取当前行的用户id
          }
          // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
          }).then(res =>{
              // 删除成功
              if(res.data.status===200){
                // 删除成功提示
                this.$message({showClose: true, message: '删除成功！',type: 'success', duration:1000,center:true});
                // 重新刷新最新的用户列表
                this.queryUserList();
              }
             
          }).catch(error =>{
             console.log(error)
          })
      }).catch(() => { //选择取消按钮进入此方法
        //取消操作
      });    
    }
    // 打开新增用户的弹窗
      //  open() {
      //   this.$alert('这是一段内容', '标题名称', {
      //     confirmButtonText: '确定',
      //     callback: action => {
      //       this.$message({
      //         type: 'info',
      //         message: `action: ${ action }`
      //       });
      //     }
      //   });
      // },
  },
  mounted() {
    // 页面加载就渲染用户列表
    this.queryUserList();
  },
};
</script>

<style  >
</style>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247

总结

感觉elementui对分页组件做的特别好。使用起来也特别简单，这样我不管从前后端哪个维度，都可以实现分页了，又多学了一个技能，如果这篇文章对你有用，那就是对我最大的支持！