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

View File

@ -17,7 +17,9 @@ Generate a group of checkboxes from an array
<br />
<a-checkbox-group :options="options" :value="['Pear']" @change="onChange" />
<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>
</template>
<script>
@ -28,7 +30,7 @@ const options = [
{ label: 'Orange', value: 'Orange' },
]
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
]

View File

@ -23,7 +23,7 @@
| -------- | ----------- | ---- | ------- |
| defaultValue | Default selected value | string\[] | \[] |
| 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\[] | \[] |
#### events

View File

@ -25,7 +25,7 @@
| --- | --- | --- | --- |
| defaultValue | 默认选中的选项 | string\[] | \[] |
| 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\[] | \[] |
#### 事件