feat: ✨checkbox label slot support use option label (#6642)
* docs: 📃change the default setting of "treeNodeFilterProp" from "value" to "label" * revert: ↩revert this config and create another pr to commit * feat: ✨checkbox label slot support use option label * test: 🧪update checkbox *.snap file --------- Co-authored-by: tangjinzhou <415800467@qq.com>pull/6658/head
parent
58f6d6ee28
commit
afc1b84ed0
|
@ -108,7 +108,7 @@ export default defineComponent({
|
|||
onChange={option.onChange}
|
||||
class={`${groupPrefixCls.value}-item`}
|
||||
>
|
||||
{option.label === undefined ? slots.label?.(option) : option.label}
|
||||
{slots.label !== undefined ? slots.label?.(option) : option.label}
|
||||
</Checkbox>
|
||||
));
|
||||
}
|
||||
|
|
|
@ -39,7 +39,7 @@ exports[`renders ./components/checkbox/demo/group.vue correctly 1`] = `
|
|||
<div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span>Apple</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-group-item"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
|
||||
<br>
|
||||
<br>
|
||||
<div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Apple</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span>Pear</span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span>Orange</span></label></div>
|
||||
<div class="ant-checkbox-group"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Apple"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Apple</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Pear"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Pear</span></span></label><label class="ant-checkbox-wrapper ant-checkbox-wrapper-disabled ant-checkbox-group-item"><span class="ant-checkbox ant-checkbox-disabled"><input type="checkbox" disabled="" class="ant-checkbox-input" value="Orange"><span class="ant-checkbox-inner"></span></span><span><span style="color: red;">Orange</span></span></label></div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/checkbox/demo/layout.vue correctly 1`] = `
|
||||
|
|
|
@ -27,8 +27,8 @@ Generate a group of checkboxes from an array
|
|||
<br />
|
||||
<br />
|
||||
<a-checkbox-group v-model:value="state.value4" :options="optionsWithDisabled" disabled>
|
||||
<template #label="{ value }">
|
||||
<span style="color: red">{{ value }}</span>
|
||||
<template #label="{ label }">
|
||||
<span style="color: red">{{ label }}</span>
|
||||
</template>
|
||||
</a-checkbox-group>
|
||||
</template>
|
||||
|
@ -42,7 +42,7 @@ const options = [
|
|||
{ label: 'Orange', value: 'Orange' },
|
||||
];
|
||||
const optionsWithDisabled = [
|
||||
{ value: 'Apple' },
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Pear', value: 'Pear' },
|
||||
{ label: 'Orange', value: 'Orange', disabled: false },
|
||||
];
|
||||
|
|
Loading…
Reference in New Issue