feat: checkbox group support custom label
parent
e13f4c566e
commit
9ecc5e1855
|
@ -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) {
|
||||
|
|
|
@ -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 },
|
||||
]
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
| -------- | ----------- | ---- | ------- |
|
||||
| defaultValue | Default selected value | string\[] | \[] |
|
||||
| disabled | Disable all checkboxes | boolean | false |
|
||||
| options | Specifies options | string\[] \| Array<{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
|
||||
| options | Specifies options, you can customize `label` with slot = "label" slot-scope = "option" | string\[] \| Array<{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
|
||||
| value | Used for setting the currently selected value. | string\[] | \[] |
|
||||
|
||||
#### events
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
| --- | --- | --- | --- |
|
||||
| defaultValue | 默认选中的选项 | string\[] | \[] |
|
||||
| disabled | 整组失效 | boolean | false |
|
||||
| options | 指定可选项 | string\[] \| Array<{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
|
||||
| options | 指定可选项,可以通过 slot="label" slot-scope="option" 定制`label` | string\[] \| Array<{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
|
||||
| value | 指定选中的选项 | string\[] | \[] |
|
||||
|
||||
#### 事件
|
||||
|
|
Loading…
Reference in New Issue