fix(components): [cascader-panel] get the reactive proxy of node to trigger side effects (#16198)

* fix(cascader-panel): get the reactive proxy of `node` to trigger side effects

* remove redundant code

* add a test case
This commit is contained in:
dopamine 2024-03-22 17:46:31 +08:00 committed by GitHub
parent 1621b6a2d5
commit 47d6aa05ca
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 5 deletions

View File

@ -3,6 +3,7 @@ import { mount } from '@vue/test-utils'
import { beforeEach, describe, expect, test, vi } from 'vitest'
import { Check, Loading } from '@element-plus/icons-vue'
import CascaderPanel from '../src/index.vue'
import Node from '../src/node.vue'
import type {
CascaderOption,
@ -675,4 +676,17 @@ describe('CascaderPanel.vue', () => {
await nextTick()
expect(vm.getCheckedNodes(true)?.length).toBe(1)
})
test('rerender node after changing model-value', async () => {
const value = ref(['zhejiang', 'hangzhou'])
const wrapper = mount(() => (
<CascaderPanel options={NORMAL_OPTIONS} model-value={value.value} />
))
const nodes = wrapper.findAllComponents(Node)
const node = nodes.find((node) => node.props('node').value === 'ningbo')
expect(node!.classes('is-active')).toBe(false)
value.value = ['zhejiang', 'ningbo']
await nextTick()
expect(node!.classes('is-active')).toBe(true)
})
})

View File

@ -265,11 +265,7 @@ export default defineComponent({
}
oldNodes.forEach((node) => node.doCheck(false))
if (props.props.multiple) {
reactive(newNodes).forEach((node) => node.doCheck(true))
} else {
newNodes.forEach((node) => node.doCheck(true))
}
reactive(newNodes).forEach((node) => node.doCheck(true))
checkedNodes.value = newNodes
nextTick(scrollToExpandingNode)
}