diff --git a/packages/renderless/src/tree-select/index.ts b/packages/renderless/src/tree-select/index.ts index 1e2e563322..c6c06c3134 100644 --- a/packages/renderless/src/tree-select/index.ts +++ b/packages/renderless/src/tree-select/index.ts @@ -130,7 +130,7 @@ export const getCheckedData = } } -export const mounted = +export const updateSelectedData = ({ api, state, props, vm }) => () => { if (!state.value || state.value.length === 0) return @@ -156,6 +156,8 @@ export const mounted = ) state.defaultCheckedKeys = api.getCheckedData()[0] + + vm.$refs.treeRef.setCheckedKeys(state.defaultCheckedKeys) } else { const data = api.getPluginOption(state.value)[0] vm.$refs.baseSelectRef.updateSelectedData({ @@ -168,5 +170,11 @@ export const mounted = }) state.currentKey = data[props.valueField] + vm.$refs.treeRef.setCurrentKey(state.currentKey) } } + +export const mounted = + ({ api }) => + () => + api.updateSelectedData() diff --git a/packages/renderless/src/tree-select/vue.ts b/packages/renderless/src/tree-select/vue.ts index 838df28186..1e7c020ff0 100644 --- a/packages/renderless/src/tree-select/vue.ts +++ b/packages/renderless/src/tree-select/vue.ts @@ -1,4 +1,13 @@ -import { check, filter, getCheckedData, getPluginOption, getTreeData, mounted, nodeClick } from './index' +import { + check, + filter, + getCheckedData, + getPluginOption, + getTreeData, + mounted, + nodeClick, + updateSelectedData +} from './index' export const api = ['state', 'check', 'filter', 'nodeClick'] @@ -21,7 +30,8 @@ export const renderless = (props, { reactive, computed, watch, onMounted }, { vm getCheckedData: getCheckedData({ props, state }), getPluginOption: getPluginOption({ api, props, state }), getTreeData: getTreeData({ props, state }), - mounted: mounted({ api, state, props, vm }), + mounted: mounted({ api }), + updateSelectedData: updateSelectedData({ api, state, props, vm }), nodeClick: nodeClick({ props, vm, emit }) }) @@ -31,6 +41,8 @@ export const renderless = (props, { reactive, computed, watch, onMounted }, { vm { immediate: true, deep: true } ) + watch(() => props.modelValue, api.updateSelectedData) + onMounted(api.mounted) return api diff --git a/packages/theme/src/tree/index.less b/packages/theme/src/tree/index.less index b83cadf4a1..d3fc6e4f7c 100644 --- a/packages/theme/src/tree/index.less +++ b/packages/theme/src/tree/index.less @@ -460,7 +460,7 @@ } } - .@{radio-prefix-cls} { + &__content-left__radio.@{radio-prefix-cls} { .@{radio-prefix-cls}__label { display: none; } diff --git a/packages/vue/src/tree-select/__tests__/tree-select.test.tsx b/packages/vue/src/tree-select/__tests__/tree-select.test.tsx new file mode 100644 index 0000000000..40c8f9fc1f --- /dev/null +++ b/packages/vue/src/tree-select/__tests__/tree-select.test.tsx @@ -0,0 +1,59 @@ +import { mountPcMode } from '@opentiny-internal/vue-test-utils' +import { describe, test, expect } from 'vitest' +import TreeSelect from '@opentiny/vue-tree-select' +import { ref, nextTick } from 'vue' + +const treeOp = { + data: [ + { + value: 1, + label: '一级 1', + children: [ + { + value: 4, + label: '二级 1-1', + children: [ + { + value: 9, + label: '三级 1-1-1' + }, + { + value: 10, + label: '三级 1-1-2' + } + ] + } + ] + }, + { + value: 2, + label: '一级 2', + children: [ + { + value: 5, + label: '二级 2-1' + }, + { + value: 6, + label: '二级 2-2' + } + ] + } + ] +} + +describe('PC Mode', () => { + const mount = mountPcMode + + test('v-model 响应式更新', async () => { + const treeSelectValue = ref(10) + const wrapper = mount(() => ) + + await nextTick() + expect(wrapper.find('.is-current .tiny-tree-node__label').text()).toEqual('三级 1-1-2') + + treeSelectValue.value = 9 + await nextTick() + expect(wrapper.find('.is-current .tiny-tree-node__label').text()).toEqual('三级 1-1-1') + }) +}) diff --git a/packages/vue/src/tree/src/tree-node.vue b/packages/vue/src/tree/src/tree-node.vue index 633d1c053f..e0c29d896e 100644 --- a/packages/vue/src/tree/src/tree-node.vue +++ b/packages/vue/src/tree/src/tree-node.vue @@ -114,7 +114,8 @@ :validate-event="false" :label="node.id" :disabled="!!node.disabled" - > + class="tiny-tree-node__content-left__radio" + />