mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(components): select v-2 value-key seems not working #2904 (#3915)

Browse Source 
* fix(components): select v-2 value-key seems not working #2904

select v-2 value-key seems not working #2904

fix #2904

* fix(components): select v-2 value-key seems not working #2904

select v-2 value-key seems not working #2904

fix #2904
This commit is contained in:
spx 2021-10-20 11:24:09 +08:00 committed by GitHub
parent 2c01c77fed
commit 896a6c9860
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 90 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
packages/components/select-v2/__tests__/select.spec.ts
View File

@ -82,6 +82,7 @@ const createSelect = (
<el-select
:options="options"
:popper-class="popperClass"
:value-key="valueKey"
:disabled="disabled"
:clearable="clearable"
:multiple="multiple"
@ -118,6 +119,7 @@ const createSelect = (
value: '',
popperClass: '',
allowCreate: false,
valueKey: 'value',
disabled: false,
clearable: false,
multiple: false,
@ -277,6 +279,46 @@ describe('Select', () => {
expect(vm.count).toBe(2)
})
it('value-key option', async () => {
const wrapper = createSelect({
data: () => {
return {
options: [
{
id: 'id 1',
value: 'value 1',
label: 'option 1',
},
{
id: 'id 2',
value: 'value 2',
label: 'option 2',
},
{
id: 'id 3',
value: 'value 3',
label: 'option 3',
},
],
value: '',
valueKey: 'id',
}
},
})
await nextTick()
const vm = wrapper.vm as any
const options = getOptions()
options[1].click()
await nextTick()
expect(vm.value).toBe(vm.options[1].id)
vm.valueKey = 'value'
await nextTick()
options[2].click()
await nextTick()
expect(vm.value).toBe(vm.options[2].value)
})
it('disabled option', async () => {
const wrapper = createSelect({
data: () => {
@ -451,6 +493,49 @@ describe('Select', () => {
await nextTick()
expect(vm.value.length).toBe(2)
})
it('value-key option', async () => {
const wrapper = createSelect({
data: () => {
return {
options: [
{
id: 'id 1',
value: 'value 1',
label: 'option 1',
},
{
id: 'id 2',
value: 'value 2',
label: 'option 2',
},
{
id: 'id 3',
value: 'value 3',
label: 'option 3',
},
],
multiple: true,
value: [],
valueKey: 'id',
}
},
})
await nextTick()
const vm = wrapper.vm as any
const options = getOptions()
options[1].click()
await nextTick()
expect(vm.value.length).toBe(1)
expect(vm.value[0]).toBe(vm.options[1].id)
vm.valueKey = 'value'
await nextTick()
options[2].click()
await nextTick()
expect(vm.value.length).toBe(2)
expect(vm.value[1]).toBe(vm.options[2].value)
})
})
describe('event', () => {

10
packages/components/select-v2/src/useSelect.ts
View File

@ -383,7 +383,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
if (props.multiple) {
let selectedOptions = (props.modelValue as any[]).slice()
const index = getValueIndex(selectedOptions, option.value)
const index = getValueIndex(selectedOptions, getValueKey(option))
if (index > -1) {
selectedOptions = [
...selectedOptions.slice(0, index),
@ -395,7 +395,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
props.multipleLimit <= 0 ||
selectedOptions.length < props.multipleLimit
) {
selectedOptions = [...selectedOptions, option.value]
selectedOptions = [...selectedOptions, getValueKey(option)]
states.cachedOptions.push(option)
selectNewOption(option)
updateHoveringIndex(idx)
@ -419,7 +419,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
} else {
selectedIndex.value = idx
states.selectedLabel = option.label
update(option.value)
update(getValueKey(option))
expanded.value = false
states.isComposing = false
states.isSilentBlur = byClick
@ -642,7 +642,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
states.cachedOptions.length = 0
;(props.modelValue as Array<any>).map((selected) => {
const itemIndex = filteredOptions.value.findIndex(
(option) => option.value === selected
(option) => getValueKey(option) === selected
)
if (~itemIndex) {
states.cachedOptions.push(
@ -661,7 +661,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
if (props.modelValue) {
const options = filteredOptions.value
const selectedItemIndex = options.findIndex(
(o) => o.value === props.modelValue
(option) => getValueKey(option) === props.modelValue
)
if (~selectedItemIndex) {
states.selectedLabel = options[selectedItemIndex].label