vue +element 删除按钮操作 (删除单个数据 +删除页码处理 )

1.配置接口deleteItemById: "/api/goods/deleteItemById", //删除商品操作
2.get请求接口

//   删除接口  后台给我们 返iddeleteItemById(params){return axios.get(base.deleteItemById,{params})}

3.异步请求接口

async deleteItemById(id){let res = await this.$api.deleteItemById({id})console.log('删除',res.data);}

4.删除完数据,表格数据也要跟着变动主要是这行代码 this.deleteItemById(row,id) 在删除事件里边操作

      handleDelete(index, row) {console.log('删除操作---',index, row);this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteItemById(row.id)}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });},

5.删除完数据 下边的分页也要处理 在分页事件里边 把val取出来

//   分页  因为val是局部变量 在data初始化一个变量 给val传递过去CurrentChange(val){console.log('分页传过来的',val);this.current = val//把this.Current给删除的重新渲染页this.projectList(val)},

6.传递完了给删除接口拿到页,重新把数据渲染到表格里边

// 删除接口async deleteItemById(id){let res = await this.$api.deleteItemById({id})console.log('删除',res.data);if(res.data.status===200){this.$message({type: 'success',message: '删除成功!'});this.projectList(this.current)}}

7.数据删除了;假如如果当前是最后一页的最后一条数据 删除后 获取上一页的数据 判断 this.total总数目

  // 如果当前是最后一页的最后一条数据 删除后 获取上一页的数据  判断 this.total总数目if(this.total%this.pageSize === 1){this.curent = this.curent -1 > 0? this.current:1;//最好>1}

全部代码

 <el-button size="mini" @click="handleDelete(scope.$index, scope.row)"  type="danger" icon="el-icon-delete">删除</el-button>

删除接口(里边涉及到 删除事件+分页+和重新渲染)

 // 删除接口async deleteItemById(id){let res = await this.$api.deleteItemById({id})console.log('删除',res.data);if(res.data.status===200){this.$message({type: 'success',message: '删除成功!'});// 删除完之后会重新渲染页面// 如果当前是最后一页的最后一条数据 删除后 获取上一页的数据  判断 this.total总数目if(this.total%this.pageSize === 1){this.curent = this.curent -1 > 0? this.current:1;//最好>1}this.projectList(this.current)}}

删除事件

   handleDelete(index, row) {console.log('删除操作---',index, row);this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteItemById(row.id)}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });},

在删除第3页面数据 的时候,想在第3页看表格数据

 //   分页  因为val是局部变量 在data初始化一个变量 给val传递过去CurrentChange(val){console.log('分页传过来的',val);this.current = val//把this.Current给删除的重新渲染页this.projectList(val)},

data里边初始化

current =1

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/143107.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Java——》IO

推荐链接&#xff1a; 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…

开利网络受邀参与生态合作伙伴和合控股“数利丰”品牌营销会议

近日&#xff0c;开利网络受邀出席生态合作伙伴“数利丰”品牌营销会议&#xff0c;就“数利丰”产品的技术能力和案例沉淀进行分享。 作为“数利丰”项目的技术支持方&#xff0c;开利网络创始人付立军在分享会上表示&#xff0c;现如今&#xff0c;每个企业都至少做过一套系统…

[论文笔记]Prefix Tuning

引言 今天带来微调LLM的第二篇论文笔记Prefix-Tuning。 作者提出了用于自然语言生成任务的prefix-tuning(前缀微调)的方法,固定语言模型的参数而优化一些连续的任务相关的向量,称为prefix。受到了语言模型提示词的启发,允许后续的token序列注意到这些prefix,当成虚拟toke…

【数据结构——单链表】本篇文章通过图文结合的方式能让你轻松的掌握单链表

链表的概念及结构 有了顺序表为什么还会出现链表呢&#xff1f; 链表和数组类似&#xff0c;但是功能比数组强大的多&#xff0c;数组的空间是固定的&#xff0c;在定义数组的时候空间大小就已经固定了&#xff0c;在使用时有可能会造成空间的浪费或者面临空间不够的风险&…

leetcode 23. 合并 K 个升序链表

2023.9.25 本题要合并k个有序链表&#xff0c;最朴素的方法可以联想到之前做的合并两个有序链表。 用一个for循环遍历lists数组&#xff0c;利用合并两个有序链表的代码&#xff0c;不断合并lists中的链表&#xff0c;最后返回头节点即可。 代码如下&#xff1a; /*** Definit…

目标分类笔记(二): 利用PaddleClas的框架来完成多标签分类任务(从数据准备到训练测试部署的完整流程)

文章目录 一、演示多分类效果二、PaddleClas介绍三、代码获取四、数据集获取五、环境搭建六、数据格式分析七、模型训练7.1 模型恢复训练7.2 多卡训练7.3 其他训练指标 八、模型预测九、模型评估十、PaddleClas相关博客 一、演示多分类效果 二、PaddleClas介绍 PaddleClas主要…

PY32F003F18之RTC

一、RTC振荡器 PY32F003F18实时时钟的振荡器是内部RC振荡器&#xff0c;频率为32.768KHz。它也可以使用HSE时钟&#xff0c;不建议使用。HAL库提到LSE振荡器&#xff0c;但PY32F003F18实际上没有这个振荡器。 缺点&#xff1a;CPU掉电后&#xff0c;需要重新配置RTC&#xff…

【深度学习】图像去噪(2)——常见网络学习

【深度学习】图像去噪 是在 【深度学习】计算机视觉 系列文章的基础上&#xff0c;再次针对深度学习&#xff08;尤其是图像去噪方面&#xff09;的基础知识有更深入学习和巩固。 1 DnCNN 1.1 网络结构 1.1.1 残差学习 1.1.2 Batch Normalization (BN) 1.1.2.1 背景和目标…

java项目之人事管理系统(ssm源码+文档)

项目简介 人事管理系统实现了以下功能&#xff1a; 管理员&#xff1a;个人中心、员工管理、部门经理管理、部门信息管理、员工考勤管理、签到管理、请假申请管理、工资查询管理、部门类型管理.部门经理&#xff1a;个人中心、员工管理、部门信息管理、员工考勤管理、签到管理…

Baichuan2 技术报告笔记

文章目录 预训练预训练数据模型架构TokenizerPositional EmbeddingsAcitivations and NormalizationsOptimizations 对齐Supervised Fine-TuningRLHF 安全性预训练阶段对齐阶段 参考资料 对Baichuan2技术报告阅读后的笔记 Baichuan2 与其他大模型的对比如下表 预训练 预训练数…

【Linux】C语言实现对文件的加密算法

异或加密 解密方式是进行第二次加密后自动解密 #define BUF_SIZE (16384) //16k /************************************************************** 功能描述: 加密实现 输入参数: --------------------------------------------------------------- 修改作者: 修改日期…

山西电力市场日前价格预测【2023-09-27】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-09-27&#xff09;山西电力市场全天平均日前电价为342.48元/MWh。其中&#xff0c;最高日前电价为454.24元/MWh&#xff0c;预计出现在18: 30。最低日前电价为171.32元/MWh&#xff0c;预计…

如何永久关闭WPS任务窗口?

1、按住任务窗口上的浮动按钮&#xff0c;将其拖出来成悬浮窗口。 第二步&#xff0c;使用火绒弹窗拦截&#xff0c;选中弹出的窗口&#xff0c;进行拦截。注意&#xff1a;拦截次数为2次。即进行2次操作。 操作两次后&#xff0c;弹窗被拦截&#xff0c;此时Word文档改为双页显…

蓝桥杯每日一题20223.9.26

4407. 扫雷 - AcWing题库 题目描述 分析 此题目使用map等都会超时&#xff0c;所以我们可以巧妙的使用哈希模拟散列表&#xff0c;哈希表初始化为-1首先将地雷读入哈希表&#xff0c;找到地雷的坐标在哈希表中对应的下标&#xff0c;如果没有则此地雷的位置第一次出现&#…

QQ怎么上传大于1G的视频啊?视频压缩这样做

当我们想要在QQ上分享一段大容量的视频时&#xff0c;往往会因为超过1G的限制而感到无助。不过&#xff0c;不用担心&#xff0c;今天我们将为你介绍三种可以压缩视频大小的方法&#xff0c;一起来看看吧~ 一、嗨格式压缩大师 嗨格式压缩大师是一款专业的视频压缩软件&#xf…

全渠道客服体验:Rocket.Chat 的无缝互动 | 开源日报 No.41

RocketChat/Rocket.Chat Stars: 36.9k License: NOASSERTION Rocket.Chat 是一个完全可定制的开源通信平台&#xff0c;适用于具有高标准数据保护要求的组织。我们是团队沟通场景下的最终免费开源解决方案&#xff0c;可以实现同事之间、公司之间或客户之间的实时对话。提高生…

13. ShardingSphere-Proxy 数据库代理

Spring Cloud 微服务系列文章&#xff0c;点击上方合集↑ 1. 简介 ShardingSphere-Proxy是ShardingSphere分布式数据库中间件的一部分&#xff0c;它提供了数据库代理功能。通过引入ShardingSphere-Proxy&#xff0c;可以在无需改动应用程序代码的情况下&#xff0c;实现分库…

使用Process Monitor工具探测日志文件是程序哪个模块生成的

目录 1、问题描述 2、使用Process Monitor监测目标文件是哪个模块生成的思路说明 3、操作Process Monitor监测日志文件是哪个模块生成的 4、通过screenctach.dll库的时间戳&#xff0c;找到其pdb文件&#xff0c;然后去查看详细的函数调用堆栈 5、最后 VC常用功能开发汇总…

用智能文字识别技术赋能古彝文数字化之路

目录 1、前言 2、对古彝文古籍的保护迫在眉睫 3、古彝文识别的难点问题 4、古彝文文字识别的关键技术 4.1、智能高清滤镜技术 4.2、图像矫正 4.3、图像增强 4.4、版面还原 5、合合信息识别技术赋能古彝文数字化 1、前言 古彝文指的是在云南、贵州、四川等地的彝族人之…

uniapp 可输入可选择的........框

安装 uniapp: uni-combox地址 vue页面 <uni-combox :border"false" input"selectname" focus"handleFocus" blur"handleBlur" :candidates"candidates" placeholder"请选择姓名" v-model"name"&g…