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"
+ />