一、背景
需求:在列表中添加定期出账的开关按钮,点击开关时,原来的状态不改变,弹出弹窗;点击弹窗取消按钮:状态不改变,点击弹窗确定按钮:状态改变,并调取列表数据刷新页面
二、具体实现
使用element el-switch开关,具体用法可查看官方指引
官网指引:Element - The world's most popular Vue UI framework
javascript
<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>
javascript
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、更改后的代码
javascript
<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>
javascript
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修复后的效果
最终:
点击开关状态不变,弹出弹窗;点击弹窗取消按钮:开关状态不变,并给与取消提示;点击弹窗确定按钮:状态改变,并调取列表数据刷新页面
**最后:**👏👏 😀😀😀 👍👍