1. 功能實現(xiàn)

繼上一篇ElementUI單選按鈕控制下拉框赴捞，添加一個switch開關(guān)組件笨忌，當(dāng)切換到禁用狀態(tài)频丘，單選按鈕組和下拉框都不能編輯办成；當(dāng)切換到啟用狀態(tài)，單選按鈕組和下拉框可以進行選擇和切換搂漠。

2. 使用技術(shù)

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

3. 實現(xiàn)源碼

<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 關(guān)閉時的背景色
（3）active-value：switch 打開時的值
（4）inactive-value：switch 關(guān)閉時的值
（5）active-text：switch 打開時的文字描述
（6）inactive-text：switch 關(guān)閉時的文字描述

4.2 el-switch組件事件說明

el-switch組件有change事件迂卢，跟el-radio、el-checkbox和el-select組件的change事件一樣桐汤，傳入一個val（改變之后的值）

4.3 開關(guān)組件控制單選按鈕組和下拉框

通過在單選按鈕組和下拉框上綁定一個disabled而克，如果開關(guān)的值為1，設(shè)置disabled為false怔毛，否則為true员萍，以這樣的方式控制單選按鈕組和下拉框