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([]) + const options = ref([ + { + value: 'guide', + label: 'Guide', + }, + { + value: 'design', + label: 'Design', + }, + { + value: 'development', + label: 'Development', + }, + ]) + const wrapper = _mount(() => ( + + )) + 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') + }) + }) })