From 7b6858374aa4fe8dbd930dffa3854356110eddfa Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 19 Jul 2025 09:21:57 +0800
Subject: [PATCH] fix(components): [cascader] dynamic options render error
 (#21405)

* fix(components): [cascader] dynamic optios render error

* fix: remove debugger

* fix: update

* test: dynamic options
---
 .../components/cascader-panel/src/index.vue   |  7 ++-
 .../cascader/__tests__/cascader.test.tsx      | 43 +++++++++++++++++++
 2 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/packages/components/cascader-panel/src/index.vue b/packages/components/cascader-panel/src/index.vue
index 5da5f51b96..5b8c424189 100644
--- a/packages/components/cascader-panel/src/index.vue
+++ b/packages/components/cascader-panel/src/index.vue
@@ -340,17 +340,20 @@ provide(
 )
 
 watch(
-  [config, () => props.options],
+  config,
   (newVal, oldVal) => {
     if (isEqual(newVal, oldVal)) return
     initStore()
   },
   {
-    deep: true,
     immediate: true,
   }
 )
 
+watch(() => props.options, initStore, {
+  deep: true,
+})
+
 watch(
   () => props.modelValue,
   () => {
diff --git a/packages/components/cascader/__tests__/cascader.test.tsx b/packages/components/cascader/__tests__/cascader.test.tsx
index fe67c43fa9..74156d03b6 100644
--- a/packages/components/cascader/__tests__/cascader.test.tsx
+++ b/packages/components/cascader/__tests__/cascader.test.tsx
@@ -813,4 +813,47 @@ describe('Cascader.vue', () => {
       expect(tags[0].text()).toContain('Zhejiang')
     })
   })
+
+  describe('dynamic options & filterable', () => {
+    it('should render dynamic options correctly', async () => {
+      const value = ref<any[]>([])
+      const options = ref<any[]>([
+        {
+          value: 'guide',
+          label: 'Guide',
+        },
+        {
+          value: 'design',
+          label: 'Design',
+        },
+        {
+          value: 'development',
+          label: 'Development',
+        },
+      ])
+      const wrapper = _mount(() => (
+        <Cascader
+          v-model={value.value}
+          filterable
+          options={options.value}
+          teleported={false}
+        />
+      ))
+      const cascaderNodes = wrapper.findAll('.el-cascader-node')
+
+      expect(cascaderNodes.length).toBe(3)
+      expect(cascaderNodes[0].text()).toBe('Guide')
+      expect(cascaderNodes[1].text()).toBe('Design')
+      expect(cascaderNodes[2].text()).toBe('Development')
+
+      options.value.push({
+        value: 'testing',
+        label: 'Testing',
+      })
+      await nextTick()
+      const newCascaderNodes = wrapper.findAll('.el-cascader-node')
+      expect(newCascaderNodes.length).toBe(4)
+      expect(newCascaderNodes[3].text()).toBe('Testing')
+    })
+  })
 })