diff --git a/packages/vant/src/cell/Cell.tsx b/packages/vant/src/cell/Cell.tsx
index 1b813c5d7..c1cc9f51a 100644
--- a/packages/vant/src/cell/Cell.tsx
+++ b/packages/vant/src/cell/Cell.tsx
@@ -77,12 +77,20 @@ export default defineComponent({
const renderTitle = () => {
if (slots.title || isDef(props.title)) {
+ const titleSlot = slots.title?.();
+
+ // Allow Field to dynamically set empty label
+ // https://github.com/youzan/vant/issues/11368
+ if (Array.isArray(titleSlot) && titleSlot.length === 0) {
+ return;
+ }
+
return (
- {slots.title ? slots.title() : {props.title}}
+ {titleSlot || {props.title}}
{renderLabel()}
);
@@ -125,9 +133,10 @@ export default defineComponent({
}
if (props.isLink) {
- const name = props.arrowDirection && props.arrowDirection !== 'right'
- ? `arrow-${props.arrowDirection}`
- : 'arrow';
+ const name =
+ props.arrowDirection && props.arrowDirection !== 'right'
+ ? `arrow-${props.arrowDirection}`
+ : 'arrow';
return ;
}
};
diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx
index 39039feda..3b48104aa 100644
--- a/packages/vant/src/field/Field.tsx
+++ b/packages/vant/src/field/Field.tsx
@@ -600,17 +600,21 @@ export default defineComponent({
return () => {
const disabled = getProp('disabled');
const labelAlign = getProp('labelAlign');
- const Label = renderLabel();
const LeftIcon = renderLeftIcon();
- const renderTitle = () =>
- labelAlign === 'top' ? [LeftIcon, Label] : Label;
+ const renderTitle = () => {
+ const Label = renderLabel();
+ if (labelAlign === 'top') {
+ return [LeftIcon, Label].filter(Boolean);
+ }
+ return Label || [];
+ };
return (
LeftIcon : null,
- title: Label || labelAlign === 'top' ? renderTitle : null,
+ title: renderTitle,
value: renderFieldBody,
extra: slots.extra,
}}
diff --git a/packages/vant/src/field/test/__snapshots__/index.spec.js.snap b/packages/vant/src/field/test/__snapshots__/index.spec.js.snap
index 9394b15b4..620efcee8 100644
--- a/packages/vant/src/field/test/__snapshots__/index.spec.js.snap
+++ b/packages/vant/src/field/test/__snapshots__/index.spec.js.snap
@@ -41,6 +41,16 @@ exports[`should render input slot correctly 1`] = `
`;
+exports[`should render label correctly when dynamically set empty label 1`] = `
+
+
+
+`;
+
exports[`should render label slot correctly 1`] = `
Custom Label
diff --git a/packages/vant/src/field/test/index.spec.js b/packages/vant/src/field/test/index.spec.js
index ff9bc7f90..ec55dae2b 100644
--- a/packages/vant/src/field/test/index.spec.js
+++ b/packages/vant/src/field/test/index.spec.js
@@ -520,3 +520,16 @@ test('should render left icon inside label when label-align is top', () => {
});
expect(wrapper.html()).toMatchSnapshot();
});
+
+test('should render label correctly when dynamically set empty label', async () => {
+ const wrapper = mount(Field, {
+ props: {
+ label: 'abc',
+ },
+ });
+
+ expect(wrapper.find('.van-field__label').html()).toMatchSnapshot();
+
+ await wrapper.setProps({ label: '' });
+ expect(wrapper.find('.van-field__label').exists()).toBeFalsy();
+});
|