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

1. 功能实现

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

2. 使用技术

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

3. 实现源码

<template>
  <el-row :gutter="20">
    <el-col :span="5">
      <el-form ref="dataForm" :model="dataForm">
        <el-form-item label="禁用/启用">
          <el-switch v-model="dataForm.isDisabled"
                     active-color="#00FF00"
                     inactive-color="#ccc"
                     active-value="1"
                     inactive-value="0"
                     active-text="启用"
                     inactive-text="禁用"
                     @change="changeDisabled"></el-switch>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-radio-group ref="radios" v-model="dataForm.type" @change="changeType" :disabled="dataForm.disabled">
            <el-radio :label="1">A</el-radio>
            <el-radio :label="2">B</el-radio>
            <el-radio :label="3">C</el-radio>
            <el-radio :label="4">D</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称">
          <el-select v-model="dataForm.username" :disabled="dataForm.disabled">
            <el-option v-for="item in dataForm.options" :key="item.value" :label="item.label" :value="parseInt(item.value)"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    name: 'Sa',
    data() {
      return {
        dataForm: {
          type: 1,
          username: '',
          isDisabled: false,
          disabled: true,
          options: [],
          option: [{
            label: 'AAA',
            value: '2019001',
            type: 'A'
          }, {
            label: 'AAB',
            value: '2019002',
            type: 'A'
          }, {
            label: 'AAC',
            value: '2019003',
            type: 'A'
          }, {
            label: 'AAD',
            value: '2019004',
            type: 'A'
          }, {
            label: 'BBA',
            value: '2019005',
            type: 'B'
          }, {
            label: 'BBB',
            value: '2019006',
            type: 'B'
          }, {
            label: 'BBC',
            value: '2019007',
            type: 'B'
          }, {
            label: 'BBD',
            value: '2019008',
            type: 'B'
          }, {
            label: 'CCA',
            value: '2019009',
            type: 'C'
          }, {
            label: 'CCB',
            value: '2019010',
            type: 'C'
          }, {
            label: 'CCC',
            value: '2019011',
            type: 'C'
          }, {
            label: 'CCD',
            value: '2019012',
            type: 'C'
          }, {
            label: 'DDA',
            value: '2019013',
            type: 'D'
          }, {
            label: 'DDB',
            value: '2019014',
            type: 'D'
          }, {
            label: 'DDC',
            value: '2019015',
            type: 'D'
          }, {
            label: 'DDD',
            value: '2019016',
            type: 'D'
          }]
        }
      }
    },
    mounted() {
      this.filterData('A')
    },
    methods: {
      changeType(val) {
        this.dataForm.username = ''
        var txt = this.$refs.radios.$children[val - 1].$el.innerText
        console.log(txt)
        this.filterData(txt)
      },
      filterData(params) {
        let options = this.dataForm.option
        let res = []
        for (let i = 0; i < options.length; i++) {
          if (params == options[i].type) {
            res.push(options[i])
          }
        }

        this.dataForm.options = res
      },
      changeDisabled(val){
        if(val == 1) {
          this.dataForm.disabled = false
        } else {
          this.dataForm.disabled = true
        }
        console.log(val)
      }
    }
  }
</script>

<style>
</style>

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，以这样的方式控制单选按钮组和下拉框