复选框按钮集合,用于处理多个选项绑定到同一变量时。
# 基础用法
值类型数组与对象数组。
<template>
<EBlock class="e-option-group-showcase">
<EBlock style="margin: 0 10px; font-size: 16px;">
String[] options
</EBlock>
<EBlock horizontal>
<EOptionGroup v-model="strValue" :options="strOptions" placeholder="value"
style="margin: 10px; width: 300px;" />
<EBlock style="padding: 10px; flex: 1;">
{{ strValue }}
</EBlock>
</EBlock>
<EBlock style="margin: 0 10px; font-size: 16px;">
Object[] options
</EBlock>
<EBlock horizontal>
<EOptionGroup v-model="objValue" :options="objOptions" placeholder="value"
style="margin: 10px; width: 300px;" />
<EBlock style="padding: 10px; flex: 1;">
{{ objValue }}
</EBlock>
</EBlock>
</EBlock>
</template>
<script>
const strOptions = ['蒹霞', '苍苍', '白露', '为霜'];
const objOptions = [
{ id: 'jx', name: '蒹霞' }, { id: 'cc', name: '苍苍' },
{ id: 'bl', name: '白露' }, { id: 'ws', name: '为霜' }
];
export default {
data() {
return {
strOptions,
objOptions,
strValue: '苍苍',
objValue: { id: 'cc', name: '苍苍' },
};
},
};
</script>
# 自定义展示值与绑定值
通过设置 optionLabel
属性自定义展示值,设置 optionValue
属性自定义绑定值。
<template>
<EBlock class="e-option-group-showcase">
<EOptionGroup
v-model="objValue"
:options="objOptions"
placeholder="value"
:option-label="v => `${v.name}-${v.id}`"
:option-value="v => v.id"
style="margin: 10px; width: 350px;" />
<EBlock style="padding: 10px; flex: 1;">
当前选中值:{{ objValue }}
</EBlock>
</EBlock>
</template>
<script>
const objOptions = [
{ id: 'jx', name: '蒹霞' }, { id: 'cc', name: '苍苍' },
{ id: 'bl', name: '白露' }, { id: 'ws', name: '为霜' }
];
export default {
data() {
return {
objOptions,
objValue: { id: 'cc', name: '苍苍' },
};
},
};
</script>
# 多选
组件默认为单选,设置 multiple
属性可进行多选操作。
<template>
<EBlock class="e-option-group-showcase">
<EBlock style="margin: 0 10px; font-size: 16px;">
String[] options
</EBlock>
<EBlock horizontal>
<EOptionGroup v-model="strValue" :options="strOptions" multiple placeholder="value"
style="margin: 10px; width: 300px;" />
<EBlock style="padding: 10px; flex: 1;">
{{ strValue }}
</EBlock>
</EBlock>
<EBlock style="margin: 0 10px; font-size: 16px;">
Object[] options
</EBlock>
<EBlock horizontal>
<EOptionGroup v-model="objValue" :options="objOptions" multiple placeholder="value"
style="margin: 10px; width: 300px;" />
<EBlock style="padding: 10px; flex: 1;">
{{ objValue }}
</EBlock>
</EBlock>
</EBlock>
</template>
<script>
const strOptions = ['蒹霞', '苍苍', '白露', '为霜'];
const objOptions = [
{ id: 'jx', name: '蒹霞' }, { id: 'cc', name: '苍苍' },
{ id: 'bl', name: '白露' }, { id: 'ws', name: '为霜' }
];
export default {
data() {
return {
strOptions,
objOptions,
strValue: ['蒹霞', '苍苍'],
objValue: [{ id: 'jx', name: '蒹霞' }, { id: 'cc', name: '苍苍' }],
};
},
};
</script>
# radio模式
设置 type="radio"
开启单选样式,ECheckbox 组件默认是 checkbox 样式的单选模式。
<template>
<EBlock class="e-option-group-showcase">
<EBlock horizontal>
<EOptionGroup v-model="strValue" type="radio" :options="strOptions" placeholder="value"
style="margin: 10px; width: 300px;" />
<EBlock style="padding: 10px; flex: 1;">
{{ strValue }}
</EBlock>
</EBlock>
</EBlock>
</template>
<script>
const strOptions = ['蒹霞', '苍苍', '白露', '为霜'];
export default {
data() {
return {
strOptions,
strValue: '蒹霞',
};
},
};
</script>
# 禁用
可以设置 disabled
属性禁用每一项,也可以通过设置 disabled-options
属性或者 options 里的项加 disabled 属性单独禁用某一项。
<template>
<EBlock class="e-option-group-showcase">
<EBlock style="font-size: 16px;">禁用全部选项</EBlock>
<EOptionGroup
v-model="strValue"
:options="strOptions"
placeholder="value"
disabled
style="margin: 10px; width: 300px;" />
<EText>已选值:{{strValue}}</EText>
</br>
<EBlock style="font-size: 16px; width: 100%; border-top: 1px solid #d6d6d6; padding-top: 20px;">禁用部分选项</EBlock>
<EText style="margin-top: 12px;">options 为 object 类型数组时,支持 options 的每一项添加 disabled 属性设置禁用项</EText>
<EOptionGroup
v-model="objValue"
:options="objOptions"
placeholder="objValue"
multiple
:option-value="v => v.id"
style="margin: 10px; width: 300px;" />
<EText>已选值:{{objValue}}</EText>
</br>
<EText style="margin-top: 8px;">options 为 string 类型数组时,支持传入 disabled-options 设置禁用项</EText>
<EOptionGroup
v-model="strValue1"
:options="strOptions"
multiple
:disabled-options="disabledOptions1"
style="margin: 10px; width: 300px;" />
<EText>已选值:{{strValue1}}</EText>
</br>
<EText style="margin-top: 8px;">options 为 object 类型数组时,支持传入 disabled-options 设置禁用项</EText>
<EOptionGroup
v-model="objValue1"
:options="objOptions1"
placeholder="objValue1"
multiple
:disabled-options="disabledOptions"
style="margin: 10px; width: 300px;" />
<EText>已选值:{{objValue1}}</EText>
</EBlock>
</template>
<script>
const strOptions = ['蒹霞', '苍苍', '白露', '为霜'];
const objOptions = [
{id: 1, name: '蒹霞'},
{id: 2, name: '苍苍', disabled: true},
{id: 3, name: '白露', disabled: true},
{id: 4, name: '为霜'},
];
const objOptions1 = [
{id: 1, name: '蒹霞'},
{id: 2, name: '苍苍'},
{id: 3, name: '白露'},
{id: 4, name: '为霜'},
];
export default {
data() {
return {
strOptions,
objOptions,
objOptions1,
disabledOptions: [ {id: 2, name: '苍苍'}, {id: 3, name: '白露'} ],
disabledOptions1: ['苍苍', '白露'],
strValue: '蒹霞',
strValue1: ['白露'],
objValue: [3],
objValue1: [{id: 3, name: '白露'}],
};
},
};
</script>
# 表单校验
配合 EFormItem
组件实现表单校验能力。
<template>
<EBlock class="e-option-group-showcase">
<EFormItem label="名称" helper="不能不选哦">
<EOptionGroup
v-model="strValue"
type="radio"
:options="strOptions"
placeholder="value"
:validation="{ required: true }"
style="margin: 10px; width: 300px;" />
</EFormItem>
<EButton @click="onClear">清空</EButton>
</EBlock>
</template>
<script>
const strOptions = ['蒹霞', '苍苍', '白露', '为霜'];
export default {
data() {
return {
strOptions,
strValue: '蒹霞',
};
},
methods: {
onClear() {
this.strValue = null;
},
},
};
</script>
# solt自定义
通过 slot-scope
自定义选项布局。
<template>
<EBlock class="e-option-group-showcase">
<EOptionGroup
v-model="waitValue"
:options="['period','until']"
type="radio"
placeholder="value"
style="margin: 10px; width: 500px;">
<template slot-scope="{ option }">
<EBlock v-if="option==='period'" horizontal align="center">
<EText>等待一段时间</EText>
<ENumberInput style="flex: 1;" />
<ESelect style="flex: 1;" :options="['分钟','小时']" />
</EBlock>
<EBlock v-if="option==='until'" horizontal align="center">
<EText>等到指定时间</EText>
<EDate style="flex: 1;" />
</EBlock>
</template>
</EOptionGroup>
</EBlock>
</template>
<script>
const strOptions = ['蒹霞', '苍苍', '白露', '为霜'];
export default {
data() {
return {
strOptions,
waitValue: null,
};
},
};
</script>
# EOptionGroup
# Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
type | checkbox, radio | String | false | - |
disabled | 是否禁用 | Boolean | false | - |
disabledOptions | 单独禁用某些项 | Array | false | - |
# Slots
Name | Description | Default Slot Content |
---|---|---|
default | label | - |
# MixIns
MixIn |
---|
EValidationMixin |
OptionsMixin |
# Events
Event Name | Description | Parameters |
---|---|---|
input | 获取选中的值 | value |