feat: checkbox group support custom label
parent
e13f4c566e
commit
9ecc5e1855
|
@ -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) {
|
||||||
|
|
|
@ -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 },
|
||||||
]
|
]
|
||||||
|
|
|
@ -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<{ 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\[] | \[] |
|
| value | Used for setting the currently selected value. | string\[] | \[] |
|
||||||
|
|
||||||
#### events
|
#### events
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| defaultValue | 默认选中的选项 | string\[] | \[] |
|
| defaultValue | 默认选中的选项 | string\[] | \[] |
|
||||||
| disabled | 整组失效 | boolean | false |
|
| 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\[] | \[] |
|
| value | 指定选中的选项 | string\[] | \[] |
|
||||||
|
|
||||||
#### 事件
|
#### 事件
|
||||||
|
|
Loading…
Reference in New Issue