el-Switch 开关二次确认

前言

最近在做毕设，有个需求是点击按钮控制用户的状态是否禁用，就看到element有个switch组件可以改造一下，就上网看了一下，结果为了这个效果忙活了很久。。。所以说记录一下，让大家少踩坑。

前置条件

先看完我的需求再决定你要不要看下去，需求不合适看了也是浪费时间。

我的数据库user表有个user_active字段是用来控制用户的禁用和启用的，理论上选用布尔类型的字段是很好用的，但是我选了int类型的1表示启用0表示禁用，导致这个二次确认实现起来很麻烦。
我的环境是vue3+element-plus，在表格里面写一个开关控制用户的状态

代码实现

template部分

解释一下：v-model绑定的值是从数据库传过来的用户user_active，通过具名插槽拿到row对象，再取到user_active

active-color="#13ce66" 启用的时候的颜色

inactive-color="#ff4969" 禁用的时候的颜色

:active-value=1 启用的时候的值为1

:inactive-value=0 禁用的值为0

注意的是如果你的也是用数字表示用户禁用启用，就一定要设置这两个，不然v-model绑定那个值，它全会显示false如下图：因为switch默认是布尔类型的，你需要设置这两个参数让它清楚你的参数类型是number

active-value和inactive-value前面一定要加" : "

不然vue是不会认为那个是数字1和0的只会认为是字符串1和0

最后监听一下点击事件，二次确认就是在changeStatus(row)函数里面操作的

javascript 复制代码

<el-table-column prop="reader_active" label="用户状态" align="center" width="90px">
  <template #default="{ row }">
      <el-switch 
        v-model="row.user_active" 
        active-color="#13ce66" 
        inactive-color="#ff4969"
        :active-value=1 
        :inactive-value=0 
        @change="changeStatus(row)">
      </el-switch>  
  </template>
</el-table-column>

script部分

简单解释一下，

先拿到表格的row对象，保存点击之后的数据flag，比如你原本是关闭的值为0,点击之后应该是1。
第二步 row.user_active = flag ? 0 : 1 是保持switch点击前的状态，flag是将要变成的状态，我现在要用户确认了之后才能变化，因为switch一点击就变了，这里通过和flag取反达到不变的操作。因为v-model绑定的值就是 row.user_active，我给它赋值成原本的值就相当于没变。
this.$confirm 就是确认框了，.then是用户点击确认之后的操作，判断将要进行的值是什么，是true就设置为1，false就设置为0
.catch 就是用户点击取消后的操作，就弹个信息窗给用户看看。

javascript 复制代码

    changeStatus(row) {
  let flag = row.user_active === 1 ? true : false //保存点击之后v-modeld的值(true，false)
  //保持switch点击前的状态
  row.user_active = flag ? 0 : 1
  this.$confirm('提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
  }).then(() => {
      flag ? row.user_active = 1 : row.user_active = 0//还原原来点击过的值
      this.$message({type: 'success', message: '修改成功!'})

//这里可以加向服务器请求接口的操作，请求更改用户状态，然后根据返回值再设置弹窗
    }).catch(() => {
      this.$message({ type: 'info', showClose: true, message: '已取消修改！' })
  });
},