fix(components): [cascader] modelValue update problem (#10119)

* fix(components): [cascader] modelValue update problem

* fix(components): [cascader-panel] modelValue update

* fix(components): [cascader] use cloneDeep
This commit is contained in:
Xc 2022-10-19 15:27:17 +08:00 committed by GitHub
parent 36b6106eff
commit aafdafa555
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 9 deletions

View File

@ -26,7 +26,7 @@ import {
ref,
watch,
} from 'vue'
import { flattenDeep, isEqual } from 'lodash-unified'
import { cloneDeep, flattenDeep, isEqual } from 'lodash-unified'
import { isClient } from '@vueuse/core'
import {
castArray,
@ -238,7 +238,7 @@ export default defineComponent({
values.map((val) => store?.getNodeByValue(val, leafOnly))
) as Node[]
syncMenuState(nodes, forced)
checkedValue.value = modelValue!
checkedValue.value = cloneDeep(modelValue)
}
}
@ -348,15 +348,21 @@ export default defineComponent({
() => {
manualChecked = false
syncCheckedValue()
},
{
deep: true,
}
)
watch(checkedValue, (val) => {
if (!isEqual(val, props.modelValue)) {
emit(UPDATE_MODEL_EVENT, val)
emit(CHANGE_EVENT, val)
watch(
() => checkedValue.value,
(val) => {
if (!isEqual(val, props.modelValue)) {
emit(UPDATE_MODEL_EVENT, val)
emit(CHANGE_EVENT, val)
}
}
})
)
onBeforeUpdate(() => (menuList.value = []))

View File

@ -196,7 +196,7 @@
// @ts-nocheck
import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue'
import { isPromise } from '@vue/shared'
import { debounce } from 'lodash-unified'
import { cloneDeep, debounce } from 'lodash-unified'
import { isClient, useResizeObserver } from '@vueuse/core'
import ElCascaderPanel, {
@ -416,7 +416,7 @@ export default defineComponent({
const checkedValue = computed<CascaderValue>({
get() {
return props.modelValue as CascaderValue
return cloneDeep(props.modelValue) as CascaderValue
},
set(val) {
emit(UPDATE_MODEL_EVENT, val)