el-switch发大
时间: 2025-01-17 21:52:45 浏览: 49
### Element UI 中 `el-switch` 组件的使用方法及属性介绍
#### 基本概念
`el-switch` 是由 Element UI 提供的一个开关组件,能够在两种状态间切换,适用于表示布尔值的选择。此组件具备高度可定制化的特点,能够适应不同的页面设计需求并融入多种布局和主题之中[^1]。
#### 属性列表
以下是 `el-switch` 的一些常用属性:
- **value / v-model**: 接收 `Boolean` 类型,默认为 `false`。用于绑定当前的状态。
- **disabled**: 接收 `Boolean` 类型,默认为 `false`。设置后可以让开关处于不可操作状态。
- **width**: 接收 `Number` 或者 `String` 类型,默认宽度为 40px。用来调整开关大小。
- **active-color, inactive-color**: 设置激活态与未激活态的颜色。
- **active-value, inactive-value**: 自定义选中/取消选中的值,不再局限于 true/false。
- **name (string)**: 同原生 `<input>` 元素 name 属性一致,在表单提交时有效。
- **validate-event (boolean)**: 是否触发表单校验事件,默认开启。
```html
<template>
<div class="switch-demo">
<!-- 默认用法 -->
<el-switch v-model="status"></el-switch>
<!-- 禁用状态 -->
<el-switch disabled></el-switch>
<!-- 定制颜色 -->
<el-switch active-color="#13ce66" inactive-color="#ff4949"></el-switch>
<!-- 更改默认值 -->
<el-switch :active-value="1" :inactive-value="0"></el-switch>
<!-- 表单内使用 -->
<form @submit.prevent="handleSubmit">
<el-switch v-model="checked" name="exampleSwitch"></el-switch>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const status = ref(false);
const checked = ref(true);
function handleSubmit() {
console.log('Form submitted with switch value:', checked.value);
}
</script>
```
对于更复杂的场景,比如在表格列 (`el-table-column`) 插槽内的应用,则可以通过监听 `before-change` 事件来获取所在行的数据(row),从而实现特定逻辑处理的需求[^2]。
阅读全文
相关推荐

















