feat: checkbox group support custom label

pull/398/head
tangjinzhou 2019-01-02 20:21:01 +08:00
parent e13f4c566e
commit 9ecc5e1855
4 changed files with 12 additions and 6 deletions

View File

@ -44,7 +44,7 @@ export default {
}, },
methods: { methods: {
getOptions () { getOptions () {
const { options } = this.$props const { options, $scopedSlots } = this
return options.map(option => { return options.map(option => {
if (typeof option === 'string') { if (typeof option === 'string') {
return { return {
@ -52,7 +52,11 @@ export default {
value: option, value: option,
} }
} }
return option let label = option.label
if (label === undefined && $scopedSlots.label) {
label = $scopedSlots.label(option)
}
return { ...option, label }
}) })
}, },
toggleOption (option) { toggleOption (option) {

View File

@ -17,7 +17,9 @@ Generate a group of checkboxes from an array
<br /> <br />
<a-checkbox-group :options="options" :value="['Pear']" @change="onChange" /> <a-checkbox-group :options="options" :value="['Pear']" @change="onChange" />
<br /> <br />
<a-checkbox-group :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" /> <a-checkbox-group :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange">
<span style="color: red" slot="label" slot-scope="{value}">{{value}}</span>
</a-checkbox-group>
</div> </div>
</template> </template>
<script> <script>
@ -28,7 +30,7 @@ const options = [
{ label: 'Orange', value: 'Orange' }, { label: 'Orange', value: 'Orange' },
] ]
const optionsWithDisabled = [ const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' }, { value: 'Apple' },
{ label: 'Pear', value: 'Pear' }, { label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false }, { label: 'Orange', value: 'Orange', disabled: false },
] ]

View File

@ -23,7 +23,7 @@
| -------- | ----------- | ---- | ------- | | -------- | ----------- | ---- | ------- |
| defaultValue | Default selected value | string\[] | \[] | | defaultValue | Default selected value | string\[] | \[] |
| disabled | Disable all checkboxes | boolean | false | | disabled | Disable all checkboxes | boolean | false |
| options | Specifies options | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] | | options | Specifies options, you can customize `label` with slot = "label" slot-scope = "option" | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
| value | Used for setting the currently selected value. | string\[] | \[] | | value | Used for setting the currently selected value. | string\[] | \[] |
#### events #### events

View File

@ -25,7 +25,7 @@
| --- | --- | --- | --- | | --- | --- | --- | --- |
| defaultValue | 默认选中的选项 | string\[] | \[] | | defaultValue | 默认选中的选项 | string\[] | \[] |
| disabled | 整组失效 | boolean | false | | disabled | 整组失效 | boolean | false |
| options | 指定可选项 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] | | options | 指定可选项,可以通过 slot="label" slot-scope="option" 定制`label` | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
| value | 指定选中的选项 | string\[] | \[] | | value | 指定选中的选项 | string\[] | \[] |
#### 事件 #### 事件