From 1f82e8ca612576aee2ce7c9d9f8f814fdd2effab Mon Sep 17 00:00:00 2001 From: sea <45450994+warmthsea@users.noreply.github.com> Date: Fri, 11 Oct 2024 13:48:12 +0800 Subject: [PATCH] feat(components): [select & select-v2] explicit export `selectedLabel` (#18350) * feat(components): [select] export selectedLabel * docs: update * docs: update th * docs: update selectedLabel version --- docs/en-US/component/select-v2.md | 9 ++-- docs/en-US/component/select.md | 9 ++-- .../select-v2/__tests__/select.test.ts | 36 +++++++++++++++ packages/components/select-v2/src/select.vue | 8 ++++ .../select/__tests__/select.test.ts | 45 +++++++++++++++++++ packages/components/select/src/select.vue | 8 ++++ 6 files changed, 107 insertions(+), 8 deletions(-) diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md index d16c0f9859..9a0223eff9 100644 --- a/docs/en-US/component/select-v2.md +++ b/docs/en-US/component/select-v2.md @@ -299,7 +299,8 @@ select-v2/custom-label ### Exposes -| Method | Description | Type | -| ------ | ----------------------------------------------- | ----------------------- | -| focus | focus the Input component | ^[Function]`() => void` | -| blur | blur the Input component, and hide the dropdown | ^[Function]`() => void` | +| Name | Description | Type | +| ---------------------- | ----------------------------------------------- | ------------------------------------------ | +| focus | focus the Input component | ^[Function]`() => void` | +| blur | blur the Input component, and hide the dropdown | ^[Function]`() => void` | +| selectedLabel ^(2.8.5) | get the currently selected label | ^[object]`ComputedRef` | diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md index 56a83c8aef..5ec9f3f0c6 100644 --- a/docs/en-US/component/select.md +++ b/docs/en-US/component/select.md @@ -264,10 +264,11 @@ select/custom-label ### Select Exposes -| Method | Description | Type | -| ------ | ----------------------------------------------- | ----------------------- | -| focus | focus the Input component | ^[Function]`() => void` | -| blur | blur the Input component, and hide the dropdown | ^[Function]`() => void` | +| Name | Description | Type | +| ---------------------- | ----------------------------------------------- | ------------------------------------------ | +| focus | focus the Input component | ^[Function]`() => void` | +| blur | blur the Input component, and hide the dropdown | ^[Function]`() => void` | +| selectedLabel ^(2.8.5) | get the currently selected label | ^[object]`ComputedRef` | ## Option Group API diff --git a/packages/components/select-v2/__tests__/select.test.ts b/packages/components/select-v2/__tests__/select.test.ts index aa45f3474d..629771fe5d 100644 --- a/packages/components/select-v2/__tests__/select.test.ts +++ b/packages/components/select-v2/__tests__/select.test.ts @@ -533,6 +533,42 @@ describe('Select', () => { ) }) + describe('expose', () => { + it('select label', async () => { + const wrapper = createSelect({ + data: () => { + return { + options: [ + { value: 'value1', label: 'label1' }, + { value: 'value2', label: 'label2' }, + ], + multiple: false, + value: '', + } + }, + }) + await nextTick() + const select = wrapper.findComponent(Select) + const selectVm = select.vm as any + const vm = wrapper.vm as any + + const options = getOptions() + options[0].click() + expect(selectVm.selectedLabel).toBe('label1') + vm.value = 'value2' + await nextTick() + expect(selectVm.selectedLabel).toBe('label2') + + vm.multiple = true + vm.value = [] + await nextTick() + expect(selectVm.selectedLabel).toStrictEqual([]) + vm.value = ['value1', 'value2'] + await nextTick() + expect(selectVm.selectedLabel).toStrictEqual(['label1', 'label2']) + }) + }) + describe('multiple', () => { it('multiple select', async () => { const wrapper = createSelect({ diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue index bd518ce97f..51baf1a5ff 100644 --- a/packages/components/select-v2/src/select.vue +++ b/packages/components/select-v2/src/select.vue @@ -329,9 +329,17 @@ export default defineComponent({ onKeyboardSelect: API.onKeyboardSelect, }) + const selectedLabel = computed(() => { + if (!props.multiple) { + return API.states.selectedLabel + } + return API.states.cachedOptions.map((i) => i.label as string) + }) + return { ...API, modelValue, + selectedLabel, } }, }) diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts index 54260677e4..22931a08ea 100644 --- a/packages/components/select/__tests__/select.test.ts +++ b/packages/components/select/__tests__/select.test.ts @@ -380,6 +380,51 @@ describe('Select', () => { expect(wrapper.find(`.${PLACEHOLDER_CLASS_NAME}`).text()).toBe('双皮奶') }) + test('expose select label', async () => { + wrapper = _mount( + ` + + + + + `, + () => ({ + options: [ + { value: '选项1', label: '黄金糕' }, + { value: '选项2', label: '双皮奶' }, + ], + value: '选项2', + multiple: false, + }) + ) + await nextTick() + const select = wrapper.findComponent({ name: 'ElSelect' }) + const vm = wrapper.vm as any + const selectVm = select.vm as any + + expect(selectVm.selectedLabel).toBe('双皮奶') + + const options = getOptions() + options[0].click() + await nextTick() + expect(selectVm.selectedLabel).toBe('黄金糕') + vm.value = '' + await nextTick() + expect(selectVm.selectedLabel).toBe('') + + vm.value = [] + vm.multiple = true + await nextTick() + expect(selectVm.selectedLabel).toStrictEqual([]) + vm.value = ['选项1', '选项2'] + await nextTick() + expect(selectVm.selectedLabel).toStrictEqual(['黄金糕', '双皮奶']) + }) + test('set default value to object', async () => { wrapper = _mount( ` diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue index 36e03f37a1..b5800fec00 100644 --- a/packages/components/select/src/select.vue +++ b/packages/components/select/src/select.vue @@ -369,9 +369,17 @@ export default defineComponent({ }) as unknown as SelectContext ) + const selectedLabel = computed(() => { + if (!props.multiple) { + return API.states.selectedLabel + } + return API.states.selected.map((i) => i.currentLabel as string) + }) + return { ...API, modelValue, + selectedLabel, } }, })