element 里面的 選擇類分的比較細(xì)致驼抹，那么我們依次封裝一下就好毙驯。
其中 Switch 這類的好辦柱锹，沒(méi)啥特別的哪自，Checkbox 這類的需要對(duì) 選項(xiàng)做一下統(tǒng)一規(guī)范。
checkbox禁熏、Switch
這兩個(gè)類似壤巷，可以看做是bool類型的。是否選定的意思瞧毙。簡(jiǎn)單封裝一下就可以胧华。
radios寄症、CheckBoxs、select的選項(xiàng)
這幾個(gè)組件的共同特點(diǎn)是矩动，需要一些備選項(xiàng)有巧，我們來(lái)統(tǒng)一一下格式：
"optionList": [
{"value": 1, "label": "文本類"},
{"value": 2, "label": "數(shù)字類"},
{"value": 3, "label": "日期類"},
{"value": 4, "label": "選擇類"}
],
為啥要統(tǒng)一格式呢？因?yàn)榻y(tǒng)一之后就可以很方便的做類型切換了悲没，比如radios 變成 select篮迎，變成 CheckBoxs。只需要改組件類型檀训，備選項(xiàng)這塊就不用改動(dòng)了柑潦。
單選組
<el-radio-group
v-model="value"
:id="'c' + controlId"
:name="'c' + controlId"
:size="size"
>
<el-radio
v-for="item in optionList"
:key="'radio' + controlId + item.value"
:label="item.value">
{{item.label}}
</el-radio>
</el-radio-group>
因?yàn)橐粋€(gè)圈沒(méi)啥意思，所以這里就直接封裝 el-radio-group 了峻凫。循環(huán) optionList 生成備選項(xiàng)。
多選組
<el-checkbox-group
v-model="value"
:id="'c' + controlId"
:name="'c' + controlId"
:size="size"
>
<el-checkbox
v-for="item in optionList"
:key="'check' + controlId + item.value"
:label="item.value">
{{item.label}}
</el-checkbox>
</el-checkbox-group>
也是一樣的方式览露。checkbox 分成了兩個(gè)組件荧琼，這里封裝 el-checkbox-group 做成多選組的形式。循環(huán) optionList 生成備選項(xiàng)差牛。
下拉選擇
<el-select
v-model="value"
@change="mySubmit"
:id="'c' + controlId"
:name="'c' + controlId"
:size="size"
>
<el-option
v-for="item in optionList"
:key="'select' + controlId + item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
還是一樣的方式命锄，循環(huán) optionList 生成 el-option。
聯(lián)動(dòng)
聯(lián)動(dòng)有兩種方式偏化，一個(gè)是直接使用 el-cascader 這樣也是簡(jiǎn)單封裝脐恩，設(shè)置好屬性即可。
另一種是監(jiān)聽(tīng)一級(jí)組件的值侦讨，設(shè)置二級(jí)組件的備選項(xiàng)驶冒；然后監(jiān)聽(tīng)二級(jí)組件的值，設(shè)置三級(jí)組件的備選項(xiàng)韵卤。以此類推骗污。
這個(gè)有點(diǎn)復(fù)雜，下次再說(shuō)沈条。
