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

爱被打了一巴掌 2023-09-24 16:37 48阅读 0赞

## 前言 ##

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

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

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

友情提示：

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

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

![在这里插入图片描述][2298543c1376468997e527ac7915cc52.png]

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

![在这里插入图片描述][dcfd0484edec48a7804337e5666da7b6.png]

## 技术选项:Pagination ##

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

它是ElementUI下的一个组件：

![在这里插入图片描述][ef9cfc92615a4e439ee96d4e1e1b5659.png]

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

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

文档：[ElementUI-Pagination 分页][ElementUI-Pagination]

![在这里插入图片描述][1ff2e6666f254e1bb78f12e3379c0646.png]

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

## 增加分页代码 ##

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

![在这里插入图片描述][0e3c77463de747ecbc120d0527f59aac.png]

相关代码：

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

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

![在这里插入图片描述][12d48a782b0f4c88838712b274c73722.png]

## 初始化数据 ##

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

![在这里插入图片描述][a1bc7ff6eb834ce985fce4155ab116ce.png]

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

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

## 回调函数 ##

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

![在这里插入图片描述][a04350ba30684cb2b78ed82da90ba6f8.png]

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

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

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

![在这里插入图片描述][b5f9f5041ae54ce9a60ef622b4f1cf4a.png]

## 指定table分页 ##

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

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

![在这里插入图片描述][d733f654d4fa4f5a93b0e681fcf07ada.png]

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

一行代码：

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

![在这里插入图片描述][1bf8bd0cbf3a42398b71e3dc3724613d.png]

## 查看效果 ##

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

初始化页面

因为我默认展示的就是第一页，并且每页展示10条嘛，所以就是这样的：  
![在这里插入图片描述][3f86c8852dbf490cb7f1d7099df910d3.png]

切换每页条数：

![在这里插入图片描述][57051874f9a84957b8a5a1b93181d1a2.png]

![在这里插入图片描述][fbf150f294634a76bec485d8c37417a2.png]

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

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

<template>
      <div>
          
        <el-button type="primary" icon="el-icon-circle-plus" >新增用户</el-button>
        
        
        <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="userName" label="姓名"  width="80" align="center" ></el-table-column>
          
          <el-table-column label="性别" width="50" align="center" prop="sex" heign>
            <template slot-scope="scope">
              
              {
        {
         scope.row.sex === 0 ? "女" : "男"}}
            </template>
          </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">
            
            <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>
          
          
        <el-table-column fixed="right"  label="操作"  width="220" align="center" >
          <template slot-scope="scope"> 
            
            <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>
        
        
        <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>

## 总结 ##

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

[2298543c1376468997e527ac7915cc52.png]: https://img-blog.csdnimg.cn/2298543c1376468997e527ac7915cc52.png
[dcfd0484edec48a7804337e5666da7b6.png]: https://img-blog.csdnimg.cn/dcfd0484edec48a7804337e5666da7b6.png
[ef9cfc92615a4e439ee96d4e1e1b5659.png]: https://img-blog.csdnimg.cn/ef9cfc92615a4e439ee96d4e1e1b5659.png
[ElementUI-Pagination]: https://element.eleme.cn/#/zh-CN/component/pagination
[1ff2e6666f254e1bb78f12e3379c0646.png]: https://img-blog.csdnimg.cn/1ff2e6666f254e1bb78f12e3379c0646.png
[0e3c77463de747ecbc120d0527f59aac.png]: https://img-blog.csdnimg.cn/0e3c77463de747ecbc120d0527f59aac.png
[12d48a782b0f4c88838712b274c73722.png]: https://img-blog.csdnimg.cn/12d48a782b0f4c88838712b274c73722.png
[a1bc7ff6eb834ce985fce4155ab116ce.png]: https://img-blog.csdnimg.cn/a1bc7ff6eb834ce985fce4155ab116ce.png
[a04350ba30684cb2b78ed82da90ba6f8.png]: https://img-blog.csdnimg.cn/a04350ba30684cb2b78ed82da90ba6f8.png
[b5f9f5041ae54ce9a60ef622b4f1cf4a.png]: https://img-blog.csdnimg.cn/b5f9f5041ae54ce9a60ef622b4f1cf4a.png
[d733f654d4fa4f5a93b0e681fcf07ada.png]: https://img-blog.csdnimg.cn/d733f654d4fa4f5a93b0e681fcf07ada.png
[1bf8bd0cbf3a42398b71e3dc3724613d.png]: https://img-blog.csdnimg.cn/1bf8bd0cbf3a42398b71e3dc3724613d.png
[3f86c8852dbf490cb7f1d7099df910d3.png]: https://img-blog.csdnimg.cn/3f86c8852dbf490cb7f1d7099df910d3.png
[57051874f9a84957b8a5a1b93181d1a2.png]: https://img-blog.csdnimg.cn/57051874f9a84957b8a5a1b93181d1a2.png
[fbf150f294634a76bec485d8c37417a2.png]: https://img-blog.csdnimg.cn/fbf150f294634a76bec485d8c37417a2.png