diff --git a/packages/components/cascader/src/contents/OverlayOption.tsx b/packages/components/cascader/src/contents/OverlayOption.tsx index 9cff1334c..ae23da966 100644 --- a/packages/components/cascader/src/contents/OverlayOption.tsx +++ b/packages/components/cascader/src/contents/OverlayOption.tsx @@ -66,6 +66,9 @@ export default defineComponent({ const handleClick = () => { if (props.isLeaf) { + if (!isSelected.value && selectedLimit.value) { + return + } handleSelect(key) setOverlayOpened(false) } else { diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts index 6be32fdf3..ca60e0539 100644 --- a/packages/components/select/__tests__/select.spec.ts +++ b/packages/components/select/__tests__/select.spec.ts @@ -510,8 +510,9 @@ describe('Select', () => { }) test('multipleLimit work', async () => { + const onChange = vi.fn() const wrapper = SelectMount({ - props: { open: true, value: [0, 1, 2, 3], multipleLimit: 4 }, + props: { open: true, value: [0, 1, 2, 3], multipleLimit: 4, onChange }, }) let options = wrapper.findAllComponents(Option) @@ -519,12 +520,20 @@ describe('Select', () => { expect(options[4].find('.ix-checkbox').classes()).toContain('ix-checkbox-disabled') expect(options[4].attributes('title')).toBe('该选择器的值不能超过 4 项') + await options[4].trigger('click') + + expect(onChange).not.toBeCalled() + await wrapper.setProps({ multipleLimit: 5 }) options = wrapper.findAllComponents(Option) expect(options[4].find('.ix-checkbox').classes()).not.toContain('ix-checkbox-disabled') expect(options[4].attributes('title')).toBe('A4') + + await options[4].trigger('click') + + expect(onChange).toBeCalled() }) test('maxLabel work', async () => { diff --git a/packages/components/select/src/panel/Option.tsx b/packages/components/select/src/panel/Option.tsx index ffa52cb77..6f4badb5a 100644 --- a/packages/components/select/src/panel/Option.tsx +++ b/packages/components/select/src/panel/Option.tsx @@ -36,13 +36,15 @@ export default defineComponent({ const isSelected = computed(() => selectedKeys.value.some(selectedKey => selectedKey === key)) + const isDisabled = computed(() => props.disabled || (!isSelected.value && selectedLimit.value)) + const classes = computed(() => { - const { disabled, parentKey } = props + const { parentKey } = props const prefixCls = `${mergedPrefixCls.value}-option` return { [prefixCls]: true, [`${prefixCls}-active`]: isActive.value, - [`${prefixCls}-disabled`]: disabled, + [`${prefixCls}-disabled`]: isDisabled.value, [`${prefixCls}-grouped`]: !isNil(parentKey), [`${prefixCls}-selected`]: isSelected.value, } @@ -55,14 +57,15 @@ export default defineComponent({ } return () => { - const { disabled, label, rawData } = props + const { label, rawData } = props const { multiple } = selectPanelProps const selected = isSelected.value + const disabled = isDisabled.value const prefixCls = `${mergedPrefixCls.value}-option` const _label = toString(label) // 优先显示 selectedLimitTitle - const title = (!(disabled || selected) && selectedLimitTitle.value) || _label + const title = (disabled && selectedLimitTitle.value) || _label const customAdditional = selectPanelProps.customAdditional ? selectPanelProps.customAdditional({ data: rawData!, index: props.index! }) : undefined @@ -78,7 +81,7 @@ export default defineComponent({ {...rawData!.additional} {...customAdditional} > - {multiple && } + {multiple && } {renderOptionLabel(slots, rawData!, _label)} )