Switch开关控制禁用启用单选按钮组和下拉框

1. 功能实现

继上一篇ElementUI单选按钮控制下拉框，添加一个switch开关组件，当切换到禁用状态，单选按钮组和下拉框都不能编辑；当切换到启用状态，单选按钮组和下拉框可以进行选择和切换。

2. 使用技术

• vue.js
• vue-router
• element
• webpack

3. 实现源码

4. 源码分析

4.1 el-switch组件属性说明

（1）active-color：switch 打开时的背景色
（2）inactive-color：switch 关闭时的背景色
（3）active-value：switch 打开时的值
（4）inactive-value：switch 关闭时的值
（5）active-text：switch 打开时的文字描述
（6）inactive-text：switch 关闭时的文字描述

4.2 el-switch组件事件说明

el-switch组件有change事件，跟el-radio、el-checkbox和el-select组件的change事件一样，传入一个val（改变之后的值）

4.3 开关组件控制单选按钮组和下拉框

通过在单选按钮组和下拉框上绑定一个disabled，如果开关的值为1，设置disabled为false，否则为true，以这样的方式控制单选按钮组和下拉框