From aafdafa555acd63194b31b680e024a32f7efefb0 Mon Sep 17 00:00:00 2001
From: Xc <xiaochen.chen@igg.com>
Date: Wed, 19 Oct 2022 15:27:17 +0800
Subject: [PATCH] fix(components): [cascader] modelValue update problem
 (#10119)

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

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

* fix(components): [cascader] use cloneDeep
---
 .../components/cascader-panel/src/index.vue   | 20 ++++++++++++-------
 packages/components/cascader/src/index.vue    |  4 ++--
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/components/cascader-panel/src/index.vue b/packages/components/cascader-panel/src/index.vue
index b5baa4850c..726e1c066e 100644
--- a/packages/components/cascader-panel/src/index.vue
+++ b/packages/components/cascader-panel/src/index.vue
@@ -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 = []))
 
diff --git a/packages/components/cascader/src/index.vue b/packages/components/cascader/src/index.vue
index ec2b69c4fa..8f888b13a4 100644
--- a/packages/components/cascader/src/index.vue
+++ b/packages/components/cascader/src/index.vue
@@ -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)