【Element】el-switch开关 点击弹窗确认框时状态先改变----点击弹窗取消框失效

一、背景

需求：在列表中添加定期出账的开关按钮，点击开关时，原来的状态不改变，弹出弹窗；点击弹窗取消按钮：状态不改变，点击弹窗确定按钮：状态改变，并调取列表数据刷新页面

二、具体实现

使用element  el-switch开关，具体用法可查看官方指引

官网指引：Element - The world's most popular Vue UI framework

<template slot-scope="scope"><el-switch@change="openSwitch($event, scope.row)"v-model="scope.row.regularlyBill"active-color="#6CD354":active-value="'1'":inactive-value="'0'"></el-switch>
</template>

methods: {/**更改开关状态 val=1是打开时  val=0是关闭时 */openSwitch(val, row) {if(val == 0){this.$Remind({title:'关闭之后，自动出账将失效，但仍可进行手工操作出账，确定要关闭吗？'}).then(()=>{this.isLoading = true;this.changeResultBill(row) //调取接口更改开关状态})}else{this.$Remind({title:'确定要开启自动定期出账吗？'}).then(()=>{this.isLoading = true;this.changeResultBill(row) //调取接口更改开关状态})}},//修改开关状态changeResultBill(row){let params = {id:row.id,regularlyBill:row.regularlyBill}this.$http.post(this.$url.lifebill.updateRegularlyBill,params).then(res=>{this.isLoading = false;if(res.code == 0){this.$message.success(res.msg)this.getDateTemplatePage(); //调取列表接口刷新页面}})},
}

备注： 

①this.$Remind是自定义封装的弹窗，弹窗组件在element上也有，具体选择按需求为主

②v-model：是数据绑定值，实现数据双向绑定；active-color：switch 打开时的背景色；active-value：switch 打开时的值；inactive-value：switch 关闭时的值

三、效果展示

四、踩坑记录

4.1、问题描述

问题1：点击打开或关闭按钮，弹窗还未点击确定，开关的状态已经先改变了

问题2：点击弹窗取消按钮，开关状态也是变化后的状态，开关状态应不改变

4.2、原因分析并解决

原因：v-model 实现数据双向绑定，点击开关时状态就实时发生变化

解决：将v-model改成:value=""，再赋值即可。调取更改开关状态的接口时也传递状态值

4.3、更改后的代码

<template slot-scope="scope">
<!-- 更改前 v-model="scope.row.regularlyBill" --><el-switch@change="openSwitch($event, scope.row)"v-model="scope.row.regularlyBill"active-color="#6CD354":active-value="'1'":inactive-value="'0'"></el-switch>
</template>

methods: {/**更改开关状态 val=1是打开时  val=0是关闭时 */openSwitch(val, row) {if(val == 0){this.$Remind({title:'关闭之后，自动出账将失效，但仍可进行手工操作出账，确定要关闭吗？'}).then(()=>{this.isLoading = true;//this.changeResultBill(row) //更改前--调取接口更改开关状态this.changeResultBill(val,row) //更改后--调取接口更改开关状态，并传入开关状态的值}).catch(()=>{this.$message.error("取消了关闭操作"); //增加了取消按钮的弹窗提示})}else{this.$Remind({title:'确定要开启自动定期出账吗？'}).then(()=>{this.isLoading = true;//this.changeResultBill(row) //更改前--调取接口更改开关状态this.changeResultBill(val,row) //更改后--调取接口更改开关状态，并传入开关状态的值}).catch(()=>{this.$message.error("取消了开启操作"); //增加了取消按钮的弹窗提示})}},//修改开关状态changeResultBill(val,row){let params = {id:row.id,//regularlyBill:row.regularlyBill //更改前regularlyBill:val //更改后}this.$http.post(this.$url.lifebill.updateRegularlyBill,params).then(res=>{this.isLoading = false;if(res.code == 0){this.$message.success(res.msg)this.getDateTemplatePage(); //调取列表接口刷新页面}})},
}

4.4、bug修复后的效果

最终：

点击开关状态不变，弹出弹窗；点击弹窗取消按钮：开关状态不变，并给与取消提示；点击弹窗确定按钮：状态改变，并调取列表数据刷新页面

 最后：👏👏 😀😀😀 👍👍