diff --git a/packages/components/select-v2/__tests__/select.test.ts b/packages/components/select-v2/__tests__/select.test.ts index 9538191c0d..7e7c20642a 100644 --- a/packages/components/select-v2/__tests__/select.test.ts +++ b/packages/components/select-v2/__tests__/select.test.ts @@ -9,6 +9,7 @@ import { rAF } from '@element-plus/test-utils/tick' import { CircleClose } from '@element-plus/icons-vue' import { usePopperContainerId } from '@element-plus/hooks' import Select from '../src/select.vue' +import type { Props } from '../useProps' vi.mock('lodash-unified', async () => { return { @@ -49,6 +50,7 @@ interface SelectProps { popperClass?: string value?: string | string[] | number | number[] options?: any[] + props?: Props disabled?: boolean clearable?: boolean multiple?: boolean @@ -99,6 +101,7 @@ const createSelect = ( ` { expect(vm.value.length).toBe(2) expect(vm.value).toContainEqual(vm.options[0].value) }) + + it('use aliases for custom options when default value is not in the options', async () => { + const wrapper = createSelect({ + data() { + return { + multiple: true, + value: ['option'], + options: [ + { + id: '1', + name: 'option 1', + }, + { + id: '2', + name: 'option 2', + }, + { + id: '3', + name: 'option 3', + }, + ], + props: { + label: 'name', + value: 'id', + }, + } + }, + }) + + await nextTick() + const vm = wrapper.vm as any + expect(wrapper.findAll('.el-tag').length).toBe(1) + expect(wrapper.find('.el-select__tags-text').text()).toBe('option') + const tagCloseIcons = wrapper.findAll('.el-tag__close') + await tagCloseIcons[0].trigger('click') + expect(vm.value.length).toBe(0) + }) }) describe('collapseTags', () => { diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts index 43aa1dd0ce..1dc2ca718b 100644 --- a/packages/components/select-v2/src/useSelect.ts +++ b/packages/components/select-v2/src/useSelect.ts @@ -58,7 +58,8 @@ const useSelect = (props: ISelectV2Props, emit) => { const { inputId } = useFormItemInputId(props, { formItemContext: elFormItem, }) - const { getLabel, getValue, getDisabled, getOptions } = useProps(props) + const { aliasProps, getLabel, getValue, getDisabled, getOptions } = + useProps(props) const { valueOnClear, isEmptyValue } = useEmptyValues(props) const states = reactive({ @@ -722,8 +723,8 @@ const useSelect = (props: ISelectV2Props, emit) => { return option } return { - value, - label: value, + [aliasProps.value.value]: value, + [aliasProps.value.label]: value, } }