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

前言

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

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

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

友情提示：

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

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

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

技术选项:Pagination

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

它是ElementUI下的一个组件：

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

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

文档：ElementUI-Pagination 分页

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

增加分页代码

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

相关代码：

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

初始化数据

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

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

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

回调函数

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

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

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

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

指定table分页

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

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

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

一行代码：

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

查看效果

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

初始化页面

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

切换每页条数：

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

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

  
      <!-- 
             数据管理
            用户列表
         -->
    新增用户
    
    
    
     
      
      <!--  -->
      
      
      
      
      
        
          
          {{ scope.row.sex === 0 ? "女" : "男"}}
        
      
      <!-- 
       -->
       
      
      
      
        
            
            
            {{scope.row.phone}}
        
      
      
      
      
      
        
          {{scope.row.status === 0 ? "正常" : "禁用"}}
        
      
      
      
           
            
            {{scope.row.birthday}}
      
      
      
      
    
       
        
        删除
        编辑
      
    

      <!-- 
     -->
    
    
    
       
    
  



// 引入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();
  },
};

总结

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