【java_web_vue】修改删除（自用）

qq_42765493

已于 2022-04-15 02:57:59 修改

阅读量1.2k

点赞数 2

文章标签： vue

于 2022-04-14 18:59:18 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_42765493/article/details/124170586

版权

修改

前端表格要自己做
在这里插入图片描述

修改功能比添加多一个选择数据的功能

要确定到某一条数据，再对他进行修改

在后面添加修改删除摁钮

还有选择框

在这里插入图片描述

通过元素的点选，就是直接在数据上点击

在这里插入图片描述

添加属性

higlight-current-row

在这里插入图片描述

配置事件

在这里插入图片描述

事件名冲突，好像和分页的冲突，自己修改一下

在这里插入图片描述

为什么没有使用 setCurrent(row) 因为这个是干这个的

在这里插入图片描述

之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。

1、我知道 currentRow

2、oldCurrentRow 这个怎么用我不知道

选中可以传入当前参数的原理

vue()

@click=“fun”
不带括号、不写实参的fun默认传event (事件对象)

@click=“fun(value)”
只要加括号，无论是否传值，都属于传实参给函数，event (事件对象)就接收不到。
如果需要实参、又需要event (事件对象)，就需要手动传入 event (事件对象)，如下：
@click=“fun($event, value)”

这个函数里面有一个参数 val 叫做入参 vue方法不加括号，默认那啥

在这里插入图片描述

这个参数就是我们当前选中的行

当前选中的行数据有很多，为了方便调用数据，所以有一个变量接收

在这里插入图片描述

就是这种结构

在这里插入图片描述

老师那个不好使，是因为他绑定的方法加了括号，不传默认参数了

在这里插入图片描述

打印出来了

在这里插入图片描述

添加业务逻辑

通过选中的参数可以获取他的一堆值

不要用这堆值，因为这堆值可能上一秒是还这个，下一秒就被修改了，不要偷懒，去数据库里面直接查

通过这里的一堆值获取到他的主键

根据主键去数据库查完整数据

在vue建立并绑定一个对象data

把完整数据对象data 绑定放到修改的表格里面

提交发送到后台

摁提交摁钮之后，重新获取main数据

好像不用清空修改列表里面的值

实践阶段

添加摁钮

在这里插入图片描述

添加一份新表单

这些记得都改了

在这里插入图片描述

老师使用替换，把add都换成了edit

在这里插入图片描述

修改后

在这里插入图片描述

数据也添加一份

在这里插入图片描述

输入框的主键不能修改要加只读

在这里插入图片描述

别忘了，点击修改和点击提交的方法控制那个显示的值

在这里插入图片描述

业务逻辑，从页面直接取值

！！注意必须是不会频繁改变的值

因为数据字段都一样，可以直接从页面取值，赋给表格

在这里插入图片描述

直接赋值对象其实传递的是引用

在这里插入图片描述

我在修改框里填东西，还没有发请求，数据就变了

直接赋值对象其实传递的是引用证明：

对象身上的id一样

打印这两个属性

在这里插入图片描述

对象身上的id一样

在这里插入图片描述

解决办法我们现在做的是对象可引用那么们可以做一个对象的克隆

就额可以把对象的关系断开了

深克隆的方法，笑死我了

在这里插入图片描述

老师从页面取值，就是为了说明这个问题

这样改就没有问题了

在这里插入图片描述

拿到数据

在这里插入图片描述

通过接口

在这里插入图片描述

直接把添加的那套方法，反馈什么的，直接拿过来，

在这里插入图片描述

修改成功

myCUD

因为添加，修改删除的方法除了请求地址参数不一样

刷新数据，给提示都一样

在这里插入图片描述

就可以提取了

在这里插入图片描述

测试一下

删除

只要能确定到当前这条

向后端接口法请求

配合前端删除摁钮往后台删除接口发一个请求

要个主键ID就够了

做个提示信息

在这里插入图片描述

老师说这里面用了一个promise对象

在这里插入图片描述

什么是promise对象

添加链接描述

算了，先不理解他是怎么弄出来的了，我就先关注后端把

开始做了

添加删除摁钮

在这里插入图片描述

method

在这里插入图片描述

编写后台接口

在这里插入图片描述

前台 method 如果点了确定就直接走axios请求了

在这里插入图片描述

最后一个问题就是不点数据，空摁摁钮会无效或会报错

在这里插入图片描述

思路，先把这两个摁钮禁用起来

当用户点了一行之后这两个摁钮再启用起来

想要禁用摁钮的话，就是加个

在这里插入图片描述

想要绑定数据，就是:disable=“true”

在这里插入图片描述

把这个boolean值，在下面做一个绑定做一个修改

在这里插入图片描述

在绑定的时候读这个值就可以了

在这里插入图片描述

绑定同一个值，控制启用禁用

在这里插入图片描述

现在就要找到，显示选中一行的时机

在这里插入图片描述

删除了之后，摁钮就应该被禁用起来

当有数据刷新的时候，都应该禁用按钮

这里我之前学了，就当复习了吧

在这里插入图片描述

这里会有问题，1、3、5页没问题，2、4、6页摁钮不灭

代码不是不能用，就是启用的时机有点问题

原因是我们没法控制vue代码的执行顺序

加了nextTick 也没用，因为我现在组件里面的对数据的处理不止一条

会刷新数据，还会发axios请求，掺和进去很多请求，用nextTick效果可能不是太好

所以就有了监控机制

可以更精准的找到数据刷新的时机

每次tableData 被替换的时候，刷新那个值

当数据发生 update 这个声明周期的时候，让我来执行一些操作

在这里插入图片描述

因为vue是自动来控制渲染顺序

当我们的请求比较多，页面结果比较复杂之后

开始写了：看我出了什么傻逼错误

update 语句 update 表 set 字段
delete from 表 where

post 请求只有最外层的过滤器能收到

其他层无法获取参数，我解决不了，之后遇到这种问题，去百度，百度找不到解决办法，直接跳过
，不能在这样了

SQL 导出语句

添加链接描述

java.lang.Object.wait(Native Method)

添加链接描述

大概懂了，老师那里是直接赋值的，直接赋个 null 应该不会报错

在这里插入图片描述

禁用是 disabled 不是 disable

watch 怎么写

在这里插入图片描述

这个table 居然不加this,哈哈

今天给喜欢的主播上了舰，记得把这个每天5块钱当成一种监督

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【java_web_vue】修改删除（自用）

修改修改功能比添加多一个选择数据的功能要确定到某一条数据，再对他进行修改在后面添加修改删除摁钮还有选择框通过元素的点选，就是直接在数据上点击添加属性higlight-current-row配置事件事件名冲突，好像和分页的冲突，自己修改一下为什么没有使用 setCurrent(row) 因为这个是干这个的之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。1、我知道 currentRo
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。