ElementPlus switch组件初始化触发change事件处理

最新推荐文章于 2024-08-23 12:55:21 发布
最新推荐文章于 2024-08-23 12:55:21 发布
阅读量954 收藏 7
点赞数 5
分类专栏： 总结 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42630688/article/details/136635139
版权

今天在写一个表格时候，表格中有个switch组件，change事件的时候需要调用接口改下状态
然后就出现页面刚进来的时候触发了一次change事件，调了一次接口。。。

看了下api有个before-change属性，

switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换

加上这个也没有什么用，刷新页面的时候还是会触发一次change事件

说下问题吧：

后端返回的字段是字符串1和0，不是true,false
这里初始化的时候就会触发change，数据转成布尔值就不会触发

小兔快跑zZ
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - Element Plus 开关组件 el-switch 首次加载或刷新页面时出现“自动执行一次change事件“问题，Switch开关初次加载会自动触发change，无法将值设为布尔值！
王佳斌
07-31 4728
vue3，elementPlus，组件库，开关，el-switch，组件，Switch开关，change事件，switch 状态发生变化时的回调函数，第一次就触发，就首次加载的时候触发一次，自动就执行了一次change，如何解决这个问题，把值改成true和false也不行，boolean布尔值，数值型，无法保证 v-model 是布尔值(true/false)，但又不能在里面写表达式怎么办，初次加载会自动执行change事件，第一次会加载或刷新会触发change的解决办法，三元表达式，表格table，还是不
elementplus初始化页面的时候el-switch自动触发的问题解决方案
sdad2154的博客
09-19 1122
使用 :beforeChange 这个属性 但是这个属性。传值 如果直接传值依然会自动调用,
Vue3 el-switch @change事件在初始化时会自动调用问题处理
weixin_44190874的博客
05-31 998
Vue3 el-switch @change事件在初始化时会自动调用问题处理
ElementPlus el-switch开关页面初始化时，change事件自动触发
红烧咸咸鱼
11-15 1409
ElementPlus el-switch开关页面初始化时，change事件自动触发。
【react+ts】找不到less类型,Cannot find module ‘./xxx.module.less‘ or its corresponding type declarations
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 5399
问题描述 Cannot find module ‘./index.module.less’ or its corresponding type declarations 找不到less后缀名的类型 解决办法 在src目录下创建类型声明文件react-app-env.d.ts，并且声明less类型 内容如下 declare module '*.module.less' { const classes: { readonly [key: string]: string }; export de
elementPlus el-switch 初始化 @change事件自动触发
m0_68595471的博客
11-15 1998
如上图 后端如果userStatus赋值是 0或1 change事件是不会触发的。应该是你初始化赋值是null 控件自动给你改成了1 然后触发了 change事件。当后端返回null change自动触发 在change事件打印了一下。解决方法 换个思维 clikc事件 替换change事件。
解决Element-Plus中el-switch的change方法自动触发问题
qq_41623635的博客
01-05 3898
getCurrentInstance()方法是Vue3 Composition API中的一个API函数。它的作用是返回一个组件实例对象，可以用来操作当前组件的各种属性和方法。这个方法是一个全局API，可以在任何地方使用。
解决使用el-switch的@change方法时初始就自动触发问题
前端小陈的成长记录
08-16 7169
el-switch
element plus el-switch 的before-change 如何带参数
sdaulee的博客
05-17 6874
看文档Switch 开关 | Element Plus 设置beforeChange属性，若返回 false 或者返回 Promise 且被 reject，则停止切换。 const beforeChange2 = () => { loading2.value = true return new Promise((_, reject) => { setTimeout(() => { loading2.value = false ElMessag
浅谈ElementUI中switch回调函数change的参数问题
12-29
八个switch组件,用同一个回调函数 switch组件状态发生变化时需要知道它目前开关状态 需要知道当前是哪个switch 问题描述 按照官方文档对switch事件的描述 事件名称 说明 回调参数 change switch 状态发生变化...
bootstrap-switch开关控件
01-15
要使普通的Bootstrap复选框转化为Switch，我们需要引入必要的JS和CSS资源，并使用jQuery对其进行初始化： ```javascript $(document).ready(function() { $('#mySwitch').bootstrapSwitch(); }); ``` 这将使...
element-ui的switch的change事件
miyachenY的博客
03-15 4967
<el-table-column prop="receiveStatus" align="center" label="默认收货地址" width="200" ><template slot-scope="scope"> 默认收货地址: <el-switch v-model="scope.row.receiveStat.
Vue+Element-ui中el-switch组件，改变数据状态且初始化
热门推荐
weixin_41346436的博客
10-23 1万+
el-switch使用过程中，通过触发开关按钮，数据更改成功，但是按钮一直是默认的一种状态，因此需要数据和开关状态同时改变，所以每次操作对应的信息时要初始化按钮开光状态。 以下是效果图 此处是一个el-dialog真的弹出框，此处省略与本要点无关的代码，只放el-switch的相关代码，此处的data04.Content是请求数据所传的值，用CusData 代替data04.Content，而d...
在Element-plus的el-table-column内使用el-switch :before-change 属性传递行数据实现
最新发布
qq_35359521的博客
08-23 209
Element-plus el-table+el-switch，行内切换前的处理方法传参。
解决Element-Plus中Swtich @change自动被触发的问题
老电影故事的博客
07-25 608
这个switchChange事件在初始化的时候会被自动触发 烦得很。如图所示 第471行 通过判断是否还有其它某元素再往下执行。如果你有其它方法 请你在评论区教我下哈 3q。
element-plus第一次会加载或刷新会触发change的解决办法
u013373006的博客
05-31 3787
<el-switch v-model="row.is_search" :active-value="1" :before-change="beforeChangeColumn" :inactive-value="2" @change="changeColumn('is_search', row)" /> setup() { ...
vue3使用 element-plus switch问题
不负韶华梦为马
04-01 564
当设置了 active-value 和inactive-value 为非bool值时， 初次加载会自动执行change事件，取消掉这两个参数设置，就能解决初次加载自动执行change事件的问题。
Element-plus el-tree 触发check-change多次事件
weixin_59015876的博客
01-11 2152
再者，就是直接选择复选框的话，复选框假如是全选的状态的话，点击树节点的父节点的话，会改变子节点所有的选择，则会触发节点数数量+1（父节点）的check-change次数。简单来说，就是当你触发了子节点的复选框，如果复选框为全选的状态，因为你的一次触发，导致变为半选的状态，导致会在触发一次父节点的复选框check-change。反之，假如树节点的复选框是没有选择的状态，由于选择了子节点后，变成了半选的状态，又会触发一次check-change。通过以上的官网的解释我们可以发现二者的不同。
渲染el-switch element-plus 会触发change事件
09-01
当渲染el-switch（Element Plus中的一个组件）时，如果用户在界面上对该开关进行操作，会触发change事件。这个change事件是ElSwitch组件内部封装的一个事件，用于捕捉用户对开关的操作行为。 change事件是根据用户在开关上进行的操作而触发的，操作可以是用户手动切换开关的状态，也可以是通过代码改变开关的状态。当开关的状态发生改变时，change事件会被触发，从而执行相应的逻辑代码。 开发者可以通过监听change事件来获取开关的最新状态，并进行相应的处理。比如可以在change事件的回调函数中获取开关状态的值，然后根据开关状态的不同执行不同的逻辑操作，比如切换其他相关元素的显示与隐藏，或者向后端发送请求进行数据更新等。 总之，渲染el-switch开关元素时，用户对其进行的操作会触发change事件。通过监听change事件，开发者可以实时获取开关状态的变化，并作出相应的响应和处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值