element中el-switch用法汇总（拓展：el-switch开关点击弹出确认框时，状态先改变，点击确认/取消失效，怎么解决?）

在Element UI中，el-switch 是一个开关组件，用于在两个状态之间切换，比如开启或关闭。

以下是 el-switch 的一些常用用法：

1. 基本用法：

<template>
  <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
  </el-switch>
</template>
 
<script>
export default {
  data() {
    return {
      value: true
    };
  }
};
</script>

2. 绑定变量：

<el-switch
  v-model="switchValue"
  active-color="#13ce66"
  inactive-color="#ff4949"
>
</el-switch>
 
<script>
export default {
  data() {
    return {
      switchValue: false
    };
  }
};
</script>

3. 使用change事件：

<el-switch
  v-model="switchValue"
  active-color="#13ce66"
  inactive-color="#ff4949"
  @change="handleChange"
>
</el-switch>
 
<script>
export default {
  data() {
    return {
      switchValue: false
    };
  },
  methods: {
    handleChange(value) {
      console.log('Switch value changed to:', value);
    }
  }
};
</script>

4. 设置不可用状态：

<el-switch
  v-model="switchValue"
  active-color="#13ce66"
  inactive-color="#ff4949"
  :disabled="true"
>
</el-switch>
 
<script>
export default {
  data() {
    return {
      switchValue: false
    };
  }
};
</script>

在实际应用中，可能需要在状态改变时进行额外的逻辑处理，比如更新数据库中的状态值。这时，可以结合 change 事件和弹框组件（如 el-message-box）来实现状态改变前的确认。

<el-switch
  v-model="switchValue"
  active-color="#13ce66"
  inactive-color="#ff4949"
  @change="handleChange"
>
</el-switch>
 
<script>
export default {
  data() {
    return {
      switchValue: false
    };
  },
  methods: {
    handleChange(value) {
      this.$confirm('确认更改状态吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认后执行状态更改逻辑
        console.log('Status changed to:', value);
      }).catch(() => {
        // 取消状态切换
        this.switchValue = !this.switchValue; // 恢复原状态
      });
    }
  }
};
</script>

在上述代码中，当用户尝试改变开关状态时，会弹出确认框。如果用户取消，开关状态会恢复到之前的状态；如果用户确认，状态更改会执行，并可以在确认后的 then 方法中添加进一步的逻辑处理。