位置: IT常识 - 正文

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

编辑:rootadmin
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 分页

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

增加分页代码

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

相关代码:

<!-- 分页 --> <!-- @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>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-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>// 引入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 的天花板。。(终于见识到什么叫云横秦岭了)

  • ipad gps定位(ipad gps)(ipad定位准不准)

    ipad gps定位(ipad gps)(ipad定位准不准)

  • vivos12是不是双卡双待(vivos12是不是双5G)

    vivos12是不是双卡双待(vivos12是不是双5G)

  • 1000兆宽带下载速度是多少(1000兆宽带下载速度只有10兆)

    1000兆宽带下载速度是多少(1000兆宽带下载速度只有10兆)

  • 奶牛快传怎么下载文件(奶牛快传怎么下载付费文件)

    奶牛快传怎么下载文件(奶牛快传怎么下载付费文件)

  • 华为p40能用钢化膜吗(华为p40能用钢化玻璃膜吗)

    华为p40能用钢化膜吗(华为p40能用钢化玻璃膜吗)

  • 索尼xperia5什么时候上市

    索尼xperia5什么时候上市

  • 怎么恢复彻底删除照片(怎么恢复彻底删除的邮件)

    怎么恢复彻底删除照片(怎么恢复彻底删除的邮件)

  • 微信标题错了怎么补救(微信标题错了怎么办)

    微信标题错了怎么补救(微信标题错了怎么办)

  • win10专用网和公用网的区别(win10专用网和公用网哪个网速更快)

    win10专用网和公用网的区别(win10专用网和公用网哪个网速更快)

  • 手机屏幕的光栅常数是多少(手机屏幕的光栅常量)

    手机屏幕的光栅常数是多少(手机屏幕的光栅常量)

  • 光纤分为哪两类(光纤分为哪两类有何特点)

    光纤分为哪两类(光纤分为哪两类有何特点)

  • int指令是什么意思(int 指令)

    int指令是什么意思(int 指令)

  • 中国移动卡怎么升级5g(中国移动卡怎么激活使用)

    中国移动卡怎么升级5g(中国移动卡怎么激活使用)

  • 笔记本的typec接口有什么用(笔记本的typec接口转dp)

    笔记本的typec接口有什么用(笔记本的typec接口转dp)

  • 数码摄像机的工作原理是(数码摄像机的工作原理图)

    数码摄像机的工作原理是(数码摄像机的工作原理图)

  • 苹果电脑内存不足怎么办(苹果电脑内存不够用怎么扩大)

    苹果电脑内存不足怎么办(苹果电脑内存不够用怎么扩大)

  • 有什么软件可以直播(有什么软件可以识别图片的文字)

    有什么软件可以直播(有什么软件可以识别图片的文字)

  • 苹果xr怎么开机关机(苹果x怎么关机)

    苹果xr怎么开机关机(苹果x怎么关机)

  • 手机qq如何开启临时会话(手机QQ如何开启密保)

    手机qq如何开启临时会话(手机QQ如何开启密保)

  • 苹果x怎么清理运行程序(苹果x怎么清理内存和缓存)

    苹果x怎么清理运行程序(苹果x怎么清理内存和缓存)

  • 抖音小黄车怎样申请(抖音小黄车怎样添加)

    抖音小黄车怎样申请(抖音小黄车怎样添加)

  • 苹果x面部识别难修吗(苹果x面部识别坏了修多少钱)

    苹果x面部识别难修吗(苹果x面部识别坏了修多少钱)

  • 新浪微博怎么注销超话(新浪微博怎么注册新账号)

    新浪微博怎么注销超话(新浪微博怎么注册新账号)

  • qq怎么删除回复(如何删除qq回复)

    qq怎么删除回复(如何删除qq回复)

  • vivoy3怎么反向充电(vivoy73s反向充电怎么弄)

    vivoy3怎么反向充电(vivoy73s反向充电怎么弄)

  • Node.js 全网最详细教程 (第一章:Node学习入门必看教程)(nodejs.org)

    Node.js 全网最详细教程 (第一章:Node学习入门必看教程)(nodejs.org)

  • 房产税的征收范围包括农村吗
  • 边际贡献总额分析法的收入为零
  • 一般纳税人给小规模开普票是几个点
  • 发票采集即征即退怎么填
  • 应税消费品的税目有哪些
  • 简易征收纳税的税率为多少?
  • 劳务发票税率营改增后是多少?
  • 12月结账写本年累计吗
  • 所得税相关分录
  • 汽车用品包含
  • 一般纳税人可以开1%的发票吗
  • 普通发票离线限额为0
  • 人工成本如何分摊到服务成本
  • 同一个单位,应收应付都有,怎么调账
  • 费用的补提利息怎么计算
  • 预缴企业所得税是含税还是不含税
  • 收回购货方前欠货款属于什么
  • 海关进口增值税计入什么科目
  • 按月预缴企业所得税的企业有哪些
  • 年底买车险会便宜吗
  • 限制浏览器打开网页
  • 法人变更涉及到什么
  • 住房公积金怎么补缴费
  • 物业管理费发票图片
  • php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
  • 企业缴纳保险的比例
  • 富贵竹怎么养才能更旺盛水培生根
  • citespace分析derwent
  • php 使用 AWS kinesis
  • 劳务费发票和建筑劳务费发票
  • cpu占满gpu不工作
  • 阿里规则官方头条
  • 未分配利润是负数是亏损吗
  • 银行承兑汇票收费标准
  • 非独立核算的分公司如何报税
  • 资金占用费怎么开票
  • 开业请别人吃饭怎么说
  • 电竞公司要求
  • 纳税收入包括居民个人在境外取得的收入吗?
  • 增值税税控系统技术维护费怎么抵扣
  • 电子承兑背书一般多久到账
  • 外经证如何缴税
  • 固定资产暂估折旧怎么算
  • 出口退税进项税额转出怎么申报
  • 股东借款转为实收资本的说明
  • 快递公司结算员能学到财务知识吗
  • 彩票扣税吗
  • 健身中心开的服装店
  • 个人所得税个人申报和公司申报区别
  • 会计科目的设置原则包括( )
  • 需要安装的固定资产有哪些
  • 周转金怎么计算
  • sqlserver恢复模式简单和完整
  • mysql5.7.32免安装教程
  • win8的文件夹选项在哪里
  • windows service 2008 r2
  • 3种方法教你有效祛湿
  • unity分发平台
  • javascript事件绑定学习要点
  • python 解析
  • Node.js生成HttpStatusCode辅助类发布到npm
  • 关于全局变量和局部变量说法不正确的是
  • 对xmlHttp对象的理解
  • unity持久化存储
  • 手游云测试工具有哪些
  • js 返回上一页面并刷新
  • javascript如何学
  • jquery打开文件对话框
  • android怎么运行
  • 测验2:python基本图形绘制
  • javascript作用域链
  • 河南医疗保险网上怎么缴费截止时间
  • 施工费税费
  • 企业所得税调整情况说明
  • 免教育费附加会计分录
  • 出口报价必须含增值税吗
  • 财税公司工资怎么样
  • 云开票怎么报税
  • 2013年山西高考作文
  • 注册会计师人员名单
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设