位置: IT常识 - 正文

Vue使用Element-UI实现分页效果(vue使用计算属性声明在什么配置项中)

发布时间：2024-01-17

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

推荐整理分享Vue使用Element-UI实现分页效果(vue使用计算属性声明在什么配置项中)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue-element-ui,vue使用什么语言,vue使用腾讯地图,vue使用iframe预览pdf,vue使用iframe预览pdf,vue使用jquery,vue使用jquery,vue使用什么软件开发,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

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

友情提示：

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

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

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

技术选项:Pagination

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

它是ElementUI下的一个组件：

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

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

文档：ElementUI-Pagination 分页

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

增加分页代码

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

相关代码：

<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> Vue使用Element-UI实现分页效果(vue使用计算属性声明在什么配置项中)

Vue使用Element-UI实现分页效果(vue使用计算属性声明在什么配置项中)

注意代码位置，我是把分页放在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即可：

<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>// 引入axiosimport 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对分页组件做的特别好。使用起来也特别简单，这样我不管从前后端哪个维度，都可以实现分页了，又多学了一个技能，如果这篇文章对你有用，那就是对我最大的支持！

本文链接地址:https://www.jiuchutong.com/zhishi/300251.html 转载请保留说明！

上一篇：【OpenCV】Qt + OpenCV 开发配置 + 入门知识（代码示例）(qt opencv ffmpeg)

下一篇：终于见识到 Python 的天花板。。(终于见识到什么叫云横秦岭了)