徐州市住房建设局网站,wordpress 网站同步,河北企业建站,站长工具流量统计一、背景
需求#xff1a;在列表中添加定期出账的开关按钮#xff0c;点击开关时#xff0c;原来的状态不改变#xff0c;弹出弹窗#xff1b;点击弹窗取消按钮#xff1a;状态不改变#xff0c;点击弹窗确定按钮#xff1a;状态改变#xff0c;并调取列表数据刷新页…一、背景
需求在列表中添加定期出账的开关按钮点击开关时原来的状态不改变弹出弹窗点击弹窗取消按钮状态不改变点击弹窗确定按钮状态改变并调取列表数据刷新页面
二、具体实现
使用element el-switch开关具体用法可查看官方指引
官网指引Element - The worlds most popular Vue UI framework
template slot-scopescopeel-switchchangeopenSwitch($event, scope.row)v-modelscope.row.regularlyBillactive-color#6CD354:active-value1:inactive-value0/el-switch
/template
methods: {/**更改开关状态 val1是打开时 val0是关闭时 */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-colorswitch 打开时的背景色active-valueswitch 打开时的值inactive-valueswitch 关闭时的值 三、效果展示 四、踩坑记录
4.1、问题描述
问题1点击打开或关闭按钮弹窗还未点击确定开关的状态已经先改变了
问题2点击弹窗取消按钮开关状态也是变化后的状态开关状态应不改变
4.2、原因分析并解决
原因v-model 实现数据双向绑定点击开关时状态就实时发生变化
解决将v-model改成:value再赋值即可。调取更改开关状态的接口时也传递状态值
4.3、更改后的代码
template slot-scopescope
!-- 更改前 v-modelscope.row.regularlyBill --el-switchchangeopenSwitch($event, scope.row)v-modelscope.row.regularlyBillactive-color#6CD354:active-value1:inactive-value0/el-switch
/template
methods: {/**更改开关状态 val1是打开时 val0是关闭时 */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修复后的效果 最终 点击开关状态不变弹出弹窗点击弹窗取消按钮开关状态不变并给与取消提示点击弹窗确定按钮状态改变并调取列表数据刷新页面 最后
