【elementUI】switch确认后再改变状态 switch回调

最新推荐文章于 2023-09-14 13:57:33 发布
最新推荐文章于 2023-09-14 13:57:33 发布
阅读量4k 收藏
点赞数
分类专栏： elementUI 文章标签： switch elementui switch回调 switch确认
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT429/article/details/113566141
版权
在遇到需要用户确认后才切换switch状态的问题时，可以利用change事件结合父级对象参数。在change回调中执行绑定值的取反操作，以确保状态变更在用户确认后发生。
摘要由CSDN通过智能技术生成

switch只有个change事件，但很多时候我们是需要用户确认后再去改变状态的，解决办法就是在调用change时把switch绑定的值的父级对象当参数，然后在change的回调里执行取反

<el-switch v-model="form.isShow" @change="changeSwitch(form)"></el-switch>


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  小花花inhere
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
ElementUI el-switch开关在消息框Messagebox确认后再作修改

				
			

			

				

					weixin_44466651的博客
				

				

					09-27
					
					2272
					
				

			

		

		

			
				
业务场景
有这么一个开关，在点击时不即时作出变化，而是弹出一个消息弹窗，进行Confirm后再决定是否改变其绑定的值。
before:

Click

case “确定”:

源码分析
在组件点击时触发该事件，即若组件未disabled则执行handleChange方法

再看到handleChange这个方法，首先是获取修改后的绑定值，然后向父组件emit input和change事件。
as we all know，该组件是使用v-moel绑定checked的值的。

回顾v-model
在 Vue 2

			
		

	



                

              
                



	

		

			

				
					
element-ui Switch组件，在change前添加确认框？确认后改变值，取消不改变

				
			

			

				

					jiajinning的博客
				

				

					12-31
					
					1000
					
				

			

		

		

			
				
element-ui Switch组件，在@change前添加确认框？确认后改变值，取消不改变
通过重写handleChange实现

			
		

	



                


  
              

                


	

		

			

				
					
element-ui  点击Switch开关弹出对话框确认后再改变switch开关状态

					
热门推荐

				
			

			

				

					lhz_333的博客
				

				

					12-13
					
					1万+
					
				

			

		

		

			
				
点击switch开关按钮后，弹出一个确认对话框，根据用户的操作来决定是否改变switch的开关状态。

			
		

	





	

		

			

				
					
el-switch实现逻辑判断后再改变状态

				
			

			

				

					qq_43592064的博客
				

				

					04-02
					
					5739
					
				

			

		

		

			
				
必须要给switch组件设置disable禁用掉，不然点击时就会改变switch开关的值，实现不了想要的效果
<el-switch
      v-model="autoUpdate"
      style="margin-top:200px"
      active-color="#5eb058"
      inactive-color="#cccccc"
      :disabl...

			
		

	



		

			
		



	

		

			

				
					
element-ui switch开关 点击按钮后，弹窗确认后再改变开关状态

				
			

			

				

					Gomeer的博客
				

				

					12-25
					
					4276
					
				

			

		

		

			
				
设置active-value和inactive-value属性，分别代表激活状态的值和关闭时候的值，与value绑定。接受Boolean,String或Number类型的值。


<el-switch
        v-model="itemValue"
        active-value="100"
        inactive-value="0"
        @chan...

			
		

	





	

		

			

				
					
el-switch 点击按钮先弹窗提示点击确认后再改变状态值

				
			

			

				

					fury的博客
				

				

					03-16
					
					1764
					
				

			

		

		

			
				
row.showState = true : row.showState = false // 这一步很重要，row.showState会根据flag的值开启或关闭开关。this.$message({type:'info',showClose: true,message:'已取消修改！let flag = row.showState //保存点击之后v-modeld的值(true，false)this.$message({type: 'success', message: '修改成功!

			
		

	





	

		

			

				
					
浅谈ElementUI中switch回调函数change的参数问题

				
			

			

				

					10-18
				

			

		

		

			
				
但是，如果页面中有多个switch组件，仅靠这个状态值我们无法确定是哪一个组件触发了回调。在实际的开发过程中，我们往往需要根据不同的switch组件执行不同的逻辑处理。  官方文档中对switch组件的change事件作了基本...

			
		

	





	

		

			

				
					
elementUI switch 开关状态更新到数据库

				
			

			

				

					New_leng的博客
				

				

					01-14
					
					1617
					
				

			

		

		

			
				
配合 slot-scope 作用域插槽使用 scope.row 可以获取当前所在行的每项数据


 <el-table-column prop="mg_state" label="状态">
          <!-- 作用域插槽 处理后台返回数据 true-false 0-1  -->
          <template slot-scope="scope">
            <!-- {{scope.row.mg_state}}  slot-...

			
		

	





	

		

			

				
					
基于element-ui的vue组件的封装（四）

				
			

			

				

					weixin_41432139的博客
				

				

					07-18
					
					409
					
				

			

		

		

			
				
封装一个element-ui风格的switch组件

			
		

	





	

		

			

				
					
vue 点击Switch开关弹出对话框确认后再改变switch开关状态

				
			

			

				

					weixin_42264750的博客
				

				

					06-08
					
					1176
					
				

			

		

		

			
				
最近在搞vue的前端开发，遇到一个问题，就是列表中有一列状态开关，点击后会弹出确认框，确认的话抵用js逻辑后改变状态，取消就不做操作。但是，在我还没确认，开关按钮是已经改变了的，如果点击取消，本应该不做操作的，也就是实际应该还是关闭状态，但页面却已经显示为打开状态。在说一下input的value属性，在组件内部要定义一个value的props属性，以便能够动态绑定上父组件传过来的值；v-model是动态绑定值到value，然后监听input的事件获取值后赋给inputValue的一个过程。

			
		

	





	

		

			

				
					
Element ui Switch 开关二次确认弹窗后再更改开关状态

				
			

			

				

					ME_GIRL的博客
				

				

					05-18
					
					842
					
				

			

		

		

			
				
Element ui Switch 开关二次确认弹窗后再更改开关状态



			
		

	





	

		

			

				
					
el-switch开关 添加二次确认弹框后,再切换状态实现

				
			

			

				

					前端泡面人
				

				

					07-20
					
					616
					
				

			

		

		

			
				
【代码】el-switch开关 添加二次确认弹框后,再切换状态实现。

			
		

	





	

		

			

				
					
vuetify v-switch 点击Switch开关弹出对话框确认后再改变switch开关状态

				
			

			

				

					m0_56070223的博客
				

				

					03-25
					
					1810
					
				

			

		

		

			
				
vuetify v-switch 点击Switch开关弹出对话框确认后再改变switch开关状态。

			
		

	





	

		

			

				
					
layui switch 开关监听 弹出确定状态转换，点击之后才修改开关状态

				
			

			

				

					weixin_47316183的博客
				

				

					10-21
					
					1598
					
				

			

		

		

			
				
layui switch 开关监听 弹出确定状态转换，点击之后才修改开关状态
这个插件是一个checkbox，只是在layui中封装了。所以layui的js和css是必不可少的。这是效果图。

话不多说，直接上代码
HTML代码如下：
> <form class="layui-form" action="">  <div class="layui-form-item">  
> <label class="layui-form-label">开关</la

			
		

	





	

		

			

				
					
在ElementUI的表格中使用Switch，给出提示框再改变值

				
			

			

				

					小楠子的博客
				

				

					10-28
					
					5955
					
				

			

		

		

			
				
本篇讲述在Vue项目中使用Switch开关改变状态值之前给出弹窗提示
项目中需求：在表格中给每项加一个状态控制按钮，点击按钮给出提示框询问用户是否确定更改状态，用户确定之后再改变Switch的开关值。

HTML

        <el-table-column label="操作" min-width="170" align="center">
          <temp...

			
		

	





	

		

			

				
					
element-ui switch开关组件二次封装，添加loading效果，点击时调用接口后改变状态

				
			

			

				

					u011295864的博客
				

				

					09-08
					
					1744
					
				

			

		

		

			
				
element-ui中的switch开关无loading属性（在element-plus时加入了），而且点击时开关状态就会切换，这使得在需要调用接口后再改变开关状态变得比较麻烦。思路：switch开关外包一层div，给div添加click事件，emit给父组件，在父组件里进行开关状态的切换。

			
		

	





	

		

			

				
					
vue3 + el-switch ，当开关关闭时，el-dialog弹框确认后改变状态

				
			

			

				

					qq_46217368的博客
				

				

					09-14
					
					462
					
				

			

		

		

			
				
不通过el-switch切换开启和关闭，加上disabled,改一下样式。switch外层包裹一等div,给div绑定click事件，通过click控制dialog,再进行判断。

			
		

	





	

		

			

				
					
iview render 写的 Switch 如何取消改变的状态

					
最新发布

				
			

			

				

					09-10
				

			

		

		

			
				
iView 是一个基于 Vue.js 的高质量 UI 组件库，它提供了丰富的组件和功能。关于您提到的 `Switch` 组件，它是一个开关按钮，可以用来切换开/关状态。在使用 iView 的 `Switch` 组件时，如果您想取消改变状态，通常可以通过绑定一个变量到 `Switch` 的 `v-model` 属性，并在状态改变的事件处理函数中更新这个变量来控制状态的变化。不过，如果您想要在状态即将改变时阻止这种改变，可以利用 `change` 事件来实现。

以下是一个简单的例子来说明如何控制 `Switch` 组件状态的改变：

```html
<template>
  <Switch v-model="switchValue" @change="handleChange"/>
</template>

<script>
export default {
  data() {
    return {
      // 初始状态可以设置为 true 或 false
      switchValue: true
    }
  },
  methods: {
    handleChange(newValue) {
      // 在这里可以加入一些逻辑判断
      // 如果满足某个条件，就阻止状态改变
      if (someCondition) {
        // 这里可以将开关状态设置回之前的值，或者直接阻止
        // 例如将状态设置回 false，不让它切换到 true
        this.switchValue = !newValue;
        // 或者使用 alert 提示用户，并且不改变状态
        alert('状态改变被阻止');
        // 注意：如果在 change 事件中直接修改绑定的变量的值，可能会导致组件不响应，所以一般不推荐直接修改，而是通过用户交互或其他逻辑来控制状态变化
      }
    }
  }
}
</script>
```

在上面的代码中，`handleChange` 方法会根据 `someCondition` 的条件判断是否要阻止状态的改变。如果需要阻止改变，可以根据实际情况将 `switchValue` 设置回原来的值，或者使用其他逻辑来处理。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值