el-switch自动触发更新事件

最新推荐文章于 2024-05-31 11:22:24 发布

nothing_more_than

最新推荐文章于 2024-05-31 11:22:24 发布

阅读量439

点赞数 1

文章标签： vue.js elementui 前端

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

本文链接：https://blog.csdn.net/txyzqc/article/details/139136681

版权

在这里插入图片描述
比如有这样一个列表，允许修改单条数据的状态。希望在更改el-switch状态时能够有个弹框做二次确认，没问题，el-switch已经帮我们想到了，所以它提供了beforeChange，根据beforeChange的结果来决定是否修改状态。一般确认修改后就会调用接口改掉该条记录的状态，此时我们再监听update:modelValue事件就能实现了。

上面思路是正常的逻辑，理论上不会遇到问题，实际中也基本上不会有问题。可是偏偏让我遇到了问题。就是进入这个列表时会发送n个修改状态的请求，即没有点击el-switch就出发了修改状态的动作。我有点蒙蔽。经过一番思考后，我发现因为启用状态字段是这次新加的，接口默认返回的是null，我猜测el-switch会自动把null改成false，因此就触发了update:modelValue。查看el-switch代码后，证实了我的猜想

在这里插入图片描述
问题找到了，解决方法也简单，数据拿到后把null改成false呗

我再说一下这个本身不是el-switch的问题，然后还是要赞美一下element plus的强大！

如果对你有帮助，请帮忙点赞，嘻嘻:)

nothing_more_than

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
el-switch自动触发更新事件

就是进入这个列表时会发送n个修改状态的请求，即没有点击el-switch就出发了修改状态的动作。经过一番思考后，我发现因为启用状态字段是这次新加的，接口默认返回的是null，我猜测el-switch会自动把null改成false，因此就触发了update:modelValue。希望在更改el-switch状态时能够有个弹框做二次确认，没问题，el-switch已经帮我们想到了，所以它提供了beforeChange，根据beforeChange的结果来决定是否修改状态。
复制链接

扫一扫

nothing_more_than CSDN认证博客专家 CSDN认证企业博客

码龄16年

119: 原创

5万+: 周排名

1万+: 总排名

28万+: 访问

: 等级

3130: 积分

52: 粉丝

136: 获赞

132: 评论

185: 收藏

私信

关注

热门文章

分类专栏

element-ui 9篇
Vue源码 18篇
重回大学课程 1篇
笔记 1篇
NuGet 5篇
.NET 3篇
Assembly Language
Automated Test
jQuery 11篇
other 1篇
Bootstrap 9篇
Git
handlebars 1篇
mysql 1篇
js select2 1篇
js 2篇
js kindeditor 2篇
微信 js 3篇
前端之路 38篇
express 1篇
ubuntu 3篇

最新评论

自定义表单元素组件内容变化触发ElForm重新校验
CSDN-Ada助手: 推荐 Vue入门技能树：https://edu.csdn.net/skill/vue?utm_source=AI_act_vue
codemirror怎么高亮指定文本
nothing_more_than: 抱歉帮不了你，code mirror的东西我已经忘的差不多了
codemirror怎么高亮指定文本
白也诗无敌诗意染千寻: class PlaceholderWidget extends WidgetType { constructor(name, type) { super(); this.name = name; this.type = type; // 新增类型参数 } eq(other) { return this.name === other.name && this.type === other.type; // 修改以考虑类型 } toDOM() { let elt; if (this.type === "string") { elt = document.createElement("i"); elt.style.color = "red"; } else if (this.type === "number") { elt = document.createElement("i"); elt.style.color = "green"; } else { elt = document.createElement("span"); } elt.textContent = this.name; return elt; } ignoreEvent() { return false; } }
codemirror怎么高亮指定文本
白也诗无敌诗意染千寻: COLUMNS("range",221,[变量])像钉钉那种，[]里面放变量，单双引号里面用户直接输入作为字符串，设置红色，数字设置绿色，怎么整，我现在用户输入的字符串里面只能输入一个内容，多的会跑到引号外面。 decoration: (match) => { // 判断文本类型 const token = match[0]; console.log(token, match); if (token.trim() == `""` || token.trim() == `''`) { console.log("是空字符串 "); return; } let type; if (token.startsWith("'") || token.startsWith('"')) { type = "string"; // 字符串类型 } else if (/^\d+$/.test(token)) { type = "number"; // 数值类型 } else { type = "other"; // 其他类型 } return Decoration.replace({ widget: new PlaceholderWidget(token, type), // 创建实例时传递类型 }); },
el-date-picker日期范围不能跨disabledDate选择
樱桃小丸犊子592: 你咋解决的还记得吗

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐
不推荐
一般般
推荐
强烈推荐

提交

最新文章

目录

评论

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

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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