el-switch实现逻辑判断后再改变状态

必须要给switch组件设置disable禁用掉，不然点击时就会改变switch开关的值，实现不了想要的效果

<el-switch
      v-model="autoUpdate"
      style="margin-top:200px"
      active-color="#5eb058"
      inactive-color="#cccccc"
      :disabled='true'
      @click.native="handleUpdate(autoUpdate)"
    ></el-switch>

// 点击开启开关
    handleUpdate(autoUpdate) {
      if (!autoUpdate) {
        this.$confirm('是否更改按钮状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.autoUpdate = true;
        })
      } else {
        this.$confirm('是否更改按钮状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.autoUpdate = false;
        })
      }
    }

样式也很关键,因为禁用了,鼠标悬停显示状态需要修改

<style lang="less">
.el-switch.is-disabled .el-switch__core,
.el-switch.is-disabled .el-switch__label {
  cursor: pointer;
}
</style>