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

一、背景

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

二、具体实现

使用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修复后的效果

最终:

点击开关状态不变,弹出弹窗;点击弹窗取消按钮:开关状态不变,并给与取消提示;点击弹窗确定按钮:状态改变,并调取列表数据刷新页面
**最后:**👏👏 😀😀😀 👍👍

相关推荐
北海-cherish7 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch8 小时前
网球馆自动预约系统的反调试
javascript·网络
2501_915909068 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist9 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师10 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang10 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。10 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
左手吻左脸。10 小时前
Element UI表格中根据数值动态设置字体颜色
vue.js·ui·elementui
李白的故乡10 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_10 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js