fix(tree-select): [tree-select] fix double binding cannot work normally

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()

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

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;
     }

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(() => <TreeSelect treeOp={treeOp} v-model={treeSelectValue.value} />)
+
+    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')
+  })
+})

packages/vue/src/tree/src/tree-node.vue

@@ -114,7 +114,8 @@
             :validate-event="false"
             :label="node.id"
             :disabled="!!node.disabled"
-          ></tiny-radio>
+            class="tiny-tree-node__content-left__radio"
+          />
           <icon-loading v-if="node.loading" class="tiny-tree-node__loading" />
           <slot name="prefix" :node="node"></slot>
           <template v-if="action.type === 'edit' && action.node && action.node === node">