当前位置：首页 > 前端教程

elementui switch

2026-03-05 22:52:53前端教程

ElementUI Switch 组件使用指南

ElementUI 的 Switch 组件是一个开关选择器，常用于表示两种状态之间的切换（如开启/关闭）。以下是详细的使用方法和常见场景示例。

基础用法

通过 v-model 绑定布尔值控制开关状态：

<el-switch v-model="value"></el-switch>

<script>
export default {
  data() {
    return {
      value: true
    }
  }
}
</script>

自定义颜色

使用 active-color 和 inactive-color 属性定义不同状态的颜色：

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

文字描述

通过 active-text 和 inactive-text 添加文字提示：

<el-switch
  v-model="value"
  active-text="启用"
  inactive-text="禁用">
</el-switch>

不同尺寸

通过 size 属性设置大小（medium/small/mini）：

<el-switch v-model="value" size="small"></el-switch>

禁用状态

添加 disabled 属性禁用开关：

<el-switch v-model="value" disabled></el-switch>

事件处理

监听 change 事件处理状态变化：

<el-switch v-model="value" @change="handleChange"></el-switch>

<script>
export default {
  methods: {
    handleChange(newVal) {
      console.log('开关状态变为:', newVal);
    }
  }
}
</script>

扩展功能

结合表单验证使用：

<el-form :model="form" :rules="rules">
  <el-form-item label="状态" prop="status">
    <el-switch v-model="form.status"></el-switch>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      form: { status: false },
      rules: {
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }
  }
}
</script>

异步操作

处理需要后端确认的开关操作：

elementui switch

<el-switch
  v-model="value"
  :loading="loading"
  @change="confirmChange">
</el-switch>

<script>
export default {
  methods: {
    confirmChange(val) {
      this.loading = true;
      api.confirmAction(val).then(() => {
        this.loading = false;
      }).catch(() => {
        this.value = !val; // 操作失败时恢复原状态
        this.loading = false;
      });
    }
  }
}
</script>

以上示例覆盖了 ElementUI Switch 组件的核心功能，可根据实际需求组合使用这些特性。对于更复杂的场景，建议参考官方文档的完整 API 说明。