From 6d285a3f68882521becfc66a3160e04215f28943 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Wed, 28 Sep 2022 16:20:58 +0800
Subject: [PATCH] feat(comp:tree): cascaderStratery instead of cascade and
 checkStratety

BREAKING CHANGE: `cascade` and `checkStrategy` are deprecated, please use `cascaderStrategy` instead.
---
 .../tree-select/demo/CascaderStrategy.md      | 20 +++++++
 ...CheckStrategy.vue => CascaderStrategy.vue} | 20 ++++---
 .../tree-select/demo/CheckStrategy.md         | 12 -----
 .../components/tree-select/docs/Api.zh.md     |  3 +-
 .../components/tree-select/src/TreeSelect.tsx | 10 +++-
 .../tree-select/src/content/Content.tsx       | 11 ++--
 packages/components/tree-select/src/types.ts  | 18 +++++++
 packages/components/tree/demo/Cascade.vue     |  3 +-
 .../components/tree/demo/CascaderStrategy.md  | 20 +++++++
 ...CheckStrategy.vue => CascaderStrategy.vue} | 28 +++++-----
 .../components/tree/demo/CheckStrategy.md     | 12 -----
 packages/components/tree/demo/Disabled.vue    | 26 ++++-----
 packages/components/tree/docs/Api.zh.md       |  3 +-
 packages/components/tree/src/Tree.tsx         | 17 +++++-
 .../tree/src/composables/useCheckable.ts      | 54 ++++++++++---------
 packages/components/tree/src/types.ts         | 18 +++++++
 packages/pro/transfer/docs/Api.zh.md          |  2 +-
 .../src/composables/useTransferTreeProps.ts   |  3 +-
 .../src/composables/useTreeDataStrategy.ts    | 27 +++++-----
 packages/pro/transfer/src/types.ts            |  3 +-
 packages/pro/tree/src/ProTree.tsx             |  3 +-
 21 files changed, 191 insertions(+), 122 deletions(-)
 create mode 100644 packages/components/tree-select/demo/CascaderStrategy.md
 rename packages/components/tree-select/demo/{CheckStrategy.vue => CascaderStrategy.vue} (70%)
 delete mode 100644 packages/components/tree-select/demo/CheckStrategy.md
 create mode 100644 packages/components/tree/demo/CascaderStrategy.md
 rename packages/components/tree/demo/{CheckStrategy.vue => CascaderStrategy.vue} (67%)
 delete mode 100644 packages/components/tree/demo/CheckStrategy.md

diff --git a/packages/components/tree-select/demo/CascaderStrategy.md b/packages/components/tree-select/demo/CascaderStrategy.md
new file mode 100644
index 000000000..6804edbe5
--- /dev/null
+++ b/packages/components/tree-select/demo/CascaderStrategy.md
@@ -0,0 +1,20 @@
+---
+title:
+  zh: 级联策略
+  en: Cascader strategy
+order: 4
+---
+
+## zh
+
+- `all`: 显示选中的所有节点
+- `parent`: 当一个父节点的所有子节点都被选中时，仅显示此父节点
+- `child`: 仅显示选中的叶子节点
+- `off`: 关闭级联，显示选中的所有节点，并且父节点可以被单独选中，这是默认的策略
+
+## en
+
+- `all`: displays all selected nodes.
+- `parent`: only a parent node is displayed when all of its children are selected.
+- `child`: displays only the selected leaf node.
+- `off`:  closes cascading, displays all selected nodes, and the parent node can be selected. This is the default strategy.
diff --git a/packages/components/tree-select/demo/CheckStrategy.vue b/packages/components/tree-select/demo/CascaderStrategy.vue
similarity index 70%
rename from packages/components/tree-select/demo/CheckStrategy.vue
rename to packages/components/tree-select/demo/CascaderStrategy.vue
index d64cc1a00..a8563199b 100644
--- a/packages/components/tree-select/demo/CheckStrategy.vue
+++ b/packages/components/tree-select/demo/CascaderStrategy.vue
@@ -1,29 +1,27 @@
 <template>
   <IxSpace vertical>
-    checkStrategy：
-    <IxRadioGroup v-model:value="checkStrategy">
-      <IxRadio value="all">all</IxRadio>
-      <IxRadio value="parent">parent</IxRadio>
-      <IxRadio value="child">child</IxRadio>
+    <IxRadioGroup v-model:value="cascaderStrategy">
+      <IxRadio value="all">All</IxRadio>
+      <IxRadio value="parent">Parent</IxRadio>
+      <IxRadio value="child">Child</IxRadio>
+      <IxRadio value="off">Off</IxRadio>
     </IxRadioGroup>
     <IxTreeSelect
       v-model:value="value"
       v-model:expandedKeys="expandedKeys"
-      placeholder="勾选策略"
       cascade
-      checkable
       multiple
+      :cascaderStrategy="cascaderStrategy"
       :dataSource="treeData"
-      :checkStrategy="checkStrategy"
     />
   </IxSpace>
 </template>
 
 <script setup lang="ts">
-import type { TreeCheckStrategy } from '@idux/components/tree'
-
 import { ref } from 'vue'
 
+import { CascaderStrategy } from '@idux/components/cascader'
+
 const treeData = [
   {
     label: 'Node 0',
@@ -57,7 +55,7 @@ const treeData = [
 
 const value = ref(['0-0'])
 const expandedKeys = ref(['0'])
-const checkStrategy = ref<TreeCheckStrategy>('parent')
+const cascaderStrategy = ref<CascaderStrategy>('parent')
 </script>
 <style lang="less" scoped>
 .ix-space {
diff --git a/packages/components/tree-select/demo/CheckStrategy.md b/packages/components/tree-select/demo/CheckStrategy.md
deleted file mode 100644
index dabe57dfa..000000000
--- a/packages/components/tree-select/demo/CheckStrategy.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title:
-  zh: 勾选策略
-  en: CheckStrategy
-order: 4
----
-
-## zh
-
-使用参考 [Tree](/components/tree/zh#components-tree-demo-CheckStrategy)
-
-## en
diff --git a/packages/components/tree-select/docs/Api.zh.md b/packages/components/tree-select/docs/Api.zh.md
index eb4c22c60..b308c35ca 100644
--- a/packages/components/tree-select/docs/Api.zh.md
+++ b/packages/components/tree-select/docs/Api.zh.md
@@ -13,10 +13,9 @@
 | `v-model:open` | 下拉菜单是否展开 | `boolean` | - | - | - |
 | `autofocus` | 默认获取焦点 | `boolean` | `false` | - | - |
 | `autocomplete` | 设置选择器的 `autocomplete` | `string` | `off` | - | - |
-| `cascade` | 是否开启级联功能 | `boolean` | `false` | - | 仅在 `multiple` 和 `checkable` 为 `true` 时生效 |
+| `cascaderStrategy` | 设置级联策略 | `'all' \| 'parent' \| 'child'` | `'off'` | `'off'` | 仅在 `multiple` 和 `checkable` 为 `true` 时生效, 具体用法参见 [级联策略](#components-tree-select-demo-CascaderStrategy) |
 | `checkable` | 是否显示选择框 | `boolean` | `false` | - | 仅在 `multiple` 为 `true` 时生效 |
 | `childrenKey` | 替代[TreeSelectNode](#TreeSelectNode)中的`children`字段 | `string` | `children` | ✅ | - |
-| `checkStrategy` | 勾选策略 | `'all' \| 'parent' \| 'child'` | `'all'` | - | 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点，仅当`cascade`为`true`时，`parent`和`child`才生效 |
 | `clearable` | 是否显示清除图标 | `boolean` | `false` | - | - |
 | `clearIcon` | 设置清除图标 | `string \| #clearIcon` | `'close-circle'` | ✅ | - |
 | `customAdditional` | 自定义下拉菜单的节点的额外属性 | `TreeSelectCustomAdditional` | - | - | 例如 `class`, 或者原生事件 |
diff --git a/packages/components/tree-select/src/TreeSelect.tsx b/packages/components/tree-select/src/TreeSelect.tsx
index 8a646a3ec..084192a12 100644
--- a/packages/components/tree-select/src/TreeSelect.tsx
+++ b/packages/components/tree-select/src/TreeSelect.tsx
@@ -9,7 +9,7 @@ import { computed, defineComponent, normalizeClass, provide, ref, watch } from '
 
 import { useAccessorAndControl } from '@idux/cdk/forms'
 import { type VirtualScrollToFn } from '@idux/cdk/scroll'
-import { type VKey, useControlledProp, useState } from '@idux/cdk/utils'
+import { Logger, type VKey, useControlledProp, useState } from '@idux/cdk/utils'
 import { ɵOverlay } from '@idux/components/_private/overlay'
 import { ɵSelector, type ɵSelectorInstance } from '@idux/components/_private/selector'
 import { useGlobalConfig } from '@idux/components/config'
@@ -175,6 +175,14 @@ export default defineComponent({
 
     const renderContent = () => <Content onClick={handleOverlayClick} />
 
+    if (__DEV__) {
+      props.cascade &&
+        Logger.warn(
+          'components/tree',
+          '`cascade` and `checkStrategy` are deprecated, please use `cascaderStrategy` instead.',
+        )
+    }
+
     return () => {
       const overlayProps = {
         class: overlayClasses.value,
diff --git a/packages/components/tree-select/src/content/Content.tsx b/packages/components/tree-select/src/content/Content.tsx
index 56f5eee0a..3806edb3d 100644
--- a/packages/components/tree-select/src/content/Content.tsx
+++ b/packages/components/tree-select/src/content/Content.tsx
@@ -49,7 +49,12 @@ export default defineComponent({
     const expandAllBtnStatus = ref(false)
 
     const mergedCheckable = computed(() => props.multiple && props.checkable)
-    const mergedCascade = computed(() => mergedCheckable.value && props.cascade)
+    const mergedCascaderStrategy = computed(() => {
+      if (!mergedCheckable.value) {
+        return 'off'
+      }
+      return props.cascade ? props.checkStrategy : props.cascaderStrategy
+    })
 
     const handleScrolledChange = (startIndex: number, endIndex: number, visibleNodes: any[]) => {
       const { onScrolledChange } = props
@@ -132,7 +137,6 @@ export default defineComponent({
 
     return () => {
       const {
-        checkStrategy,
         customAdditional,
         dataSource,
         draggable,
@@ -186,9 +190,8 @@ export default defineComponent({
           loadedKeys={loadedKeys.value}
           labelKey={mergedLabelKey.value}
           checkable={mergedCheckable.value}
-          cascade={mergedCascade.value}
+          cascaderStrategy={mergedCascaderStrategy.value}
           childrenKey={mergedChildrenKey.value}
-          checkStrategy={checkStrategy}
           dataSource={dataSource}
           draggable={draggable}
           draggableIcon={draggableIcon}
diff --git a/packages/components/tree-select/src/types.ts b/packages/components/tree-select/src/types.ts
index 41edf6a89..bcba42365 100644
--- a/packages/components/tree-select/src/types.ts
+++ b/packages/components/tree-select/src/types.ts
@@ -11,6 +11,7 @@ import type { AbstractControl } from '@idux/cdk/forms'
 import type { PortalTargetType } from '@idux/cdk/portal'
 import type { VirtualScrollToFn } from '@idux/cdk/scroll'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
+import type { CascaderStrategy } from '@idux/components/cascader'
 import type { EmptyProps } from '@idux/components/empty'
 import type { FormSize } from '@idux/components/form'
 import type {
@@ -33,10 +34,27 @@ export const treeSelectProps = {
   autofocus: { type: Boolean, default: false },
   borderless: { type: Boolean, default: undefined },
   childrenKey: { type: String, default: undefined },
+  cascaderStrategy: { type: String as PropType<CascaderStrategy>, default: 'off' },
+  /**
+   * @deprecated please use `cascaderStrategy` instead'
+   *
+   *  * cascade: false + checkStrategy: 'all' = cascaderStrategy: 'off'
+   *  * cascade: true + checkStrategy: 'all' = cascaderStrategy: 'all'
+   *  * cascade: true + checkStrategy: 'parent' = cascaderStrategy: 'parent'
+   *  * cascade: true + checkStrategy: 'child' = cascaderStrategy: 'child'
+   */
   cascade: { type: Boolean, default: false },
   checkable: { type: Boolean, default: false },
   clearable: { type: Boolean, default: false },
   clearIcon: { type: String, default: undefined },
+  /**
+   * @deprecated please use `cascaderStrategy` instead'
+   *
+   *  * cascade: false + checkStrategy: 'all' = cascaderStrategy: 'off'
+   *  * cascade: true + checkStrategy: 'all' = cascaderStrategy: 'all'
+   *  * cascade: true + checkStrategy: 'parent' = cascaderStrategy: 'parent'
+   *  * cascade: true + checkStrategy: 'child' = cascaderStrategy: 'child'
+   */
   checkStrategy: { type: String as PropType<TreeCheckStrategy>, default: 'all' },
   customAdditional: { type: Function as PropType<TreeSelectCustomAdditional>, default: undefined },
   dataSource: { type: Array as PropType<TreeSelectNode[]>, default: () => [] },
diff --git a/packages/components/tree/demo/Cascade.vue b/packages/components/tree/demo/Cascade.vue
index a74490075..81ccf1faa 100644
--- a/packages/components/tree/demo/Cascade.vue
+++ b/packages/components/tree/demo/Cascade.vue
@@ -3,9 +3,8 @@
     v-model:checkedKeys="checkedKeys"
     v-model:expandedKeys="expandedKeys"
     v-model:selectedKeys="selectedKeys"
-    cascade
     checkable
-    checkStrategy="parent"
+    cascaderStrategy="parent"
     :dataSource="treeData"
     @check="onCheck"
     @expand="onExpand"
diff --git a/packages/components/tree/demo/CascaderStrategy.md b/packages/components/tree/demo/CascaderStrategy.md
new file mode 100644
index 000000000..4afc67b42
--- /dev/null
+++ b/packages/components/tree/demo/CascaderStrategy.md
@@ -0,0 +1,20 @@
+---
+title:
+  zh: 级联策略
+  en: Cascader strategy
+order: 8
+---
+
+## zh
+
+- `all`: 显示选中的所有节点
+- `parent`: 当一个父节点的所有子节点都被选中时，仅显示此父节点
+- `child`: 仅显示选中的叶子节点
+- `off`: 关闭级联，显示选中的所有节点，并且父节点可以被单独选中，这是默认的策略
+
+## en
+
+- `all`: displays all selected nodes.
+- `parent`: only a parent node is displayed when all of its children are selected.
+- `child`: displays only the selected leaf node.
+- `off`:  closes cascading, displays all selected nodes, and the parent node can be selected. This is the default strategy.
diff --git a/packages/components/tree/demo/CheckStrategy.vue b/packages/components/tree/demo/CascaderStrategy.vue
similarity index 67%
rename from packages/components/tree/demo/CheckStrategy.vue
rename to packages/components/tree/demo/CascaderStrategy.vue
index 35ad70fb7..d99986d92 100644
--- a/packages/components/tree/demo/CheckStrategy.vue
+++ b/packages/components/tree/demo/CascaderStrategy.vue
@@ -1,32 +1,29 @@
 <template>
   <IxSpace vertical>
-    checkStrategy：
-    <IxRadioGroup v-model:value="checkStrategy">
-      <IxRadio value="all">all</IxRadio>
-      <IxRadio value="parent">parent</IxRadio>
-      <IxRadio value="child">child</IxRadio>
+    <IxRadioGroup v-model:value="cascaderStrategy">
+      <IxRadio value="all">All</IxRadio>
+      <IxRadio value="parent">Parent</IxRadio>
+      <IxRadio value="child">Child</IxRadio>
+      <IxRadio value="off">Off</IxRadio>
     </IxRadioGroup>
     <IxTree
       v-model:checkedKeys="checkedKeys"
       v-model:expandedKeys="expandedKeys"
       v-model:selectedKeys="selectedKeys"
       checkable
-      cascade
-      :checkStrategy="checkStrategy"
+      :cascaderStrategy="cascaderStrategy"
       :dataSource="treeData"
       @check="onCheck"
-      @expand="onExpand"
-      @select="onSelect"
     >
     </IxTree>
-    checkedKeys：{{ checkedKeys }}
   </IxSpace>
 </template>
 
 <script setup lang="ts">
-import type { TreeCheckStrategy, TreeNode } from '@idux/components/tree'
+import { ref, watchEffect } from 'vue'
 
-import { ref } from 'vue'
+import { CascaderStrategy } from '@idux/components/cascader'
+import { TreeNode } from '@idux/components/tree'
 
 const treeData: TreeNode[] = [
   {
@@ -79,8 +76,9 @@ const checkedKeys = ref(['0'])
 const expandedKeys = ref(['0', '0-0', '0-1'])
 const selectedKeys = ref(['0-1'])
 
-const checkStrategy = ref<TreeCheckStrategy>('parent')
+const cascaderStrategy = ref<CascaderStrategy>('all')
+
+watchEffect(() => console.log('checkedKeys:', checkedKeys.value))
+
 const onCheck = (checked: boolean, node: TreeNode) => console.log('checked', checked, node)
-const onExpand = (expanded: boolean, node: TreeNode) => console.log('expanded', expanded, node)
-const onSelect = (selected: boolean, node: TreeNode) => console.log('selected', selected, node)
 </script>
diff --git a/packages/components/tree/demo/CheckStrategy.md b/packages/components/tree/demo/CheckStrategy.md
deleted file mode 100644
index 23c25531c..000000000
--- a/packages/components/tree/demo/CheckStrategy.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title:
-  zh: 勾选策略
-  en: CheckStrategy
-order: 8
----
-
-## zh
-
-设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点，仅当`cascade`为`true`时，`parent`和`child`才生效
-
-## en
diff --git a/packages/components/tree/demo/Disabled.vue b/packages/components/tree/demo/Disabled.vue
index 2c27328d7..9b5895fb5 100644
--- a/packages/components/tree/demo/Disabled.vue
+++ b/packages/components/tree/demo/Disabled.vue
@@ -1,23 +1,17 @@
 <template>
   <IxSpace vertical>
-    checkStrategy：
-    <IxRadioGroup v-model:value="checkStrategy">
-      <IxRadio value="all">all</IxRadio>
-      <IxRadio value="parent">parent</IxRadio>
-      <IxRadio value="child">child</IxRadio>
-    </IxRadioGroup>
-    cascade
-    <IxRadioGroup v-model:value="cascade">
-      <IxRadio :value="true">true</IxRadio>
-      <IxRadio :value="false">false</IxRadio>
+    <IxRadioGroup v-model:value="cascaderStrategy">
+      <IxRadio value="all">All</IxRadio>
+      <IxRadio value="parent">Parent</IxRadio>
+      <IxRadio value="child">Child</IxRadio>
+      <IxRadio value="off">Off</IxRadio>
     </IxRadioGroup>
     <IxTree
       v-model:checkedKeys="checkedKeys"
       v-model:expandedKeys="expandedKeys"
       v-model:selectedKeys="selectedKeys"
       checkable
-      :cascade="cascade"
-      :checkStrategy="checkStrategy"
+      :cascaderStrategy="cascaderStrategy"
       :dataSource="treeData"
       @check="onCheck"
       @expand="onExpand"
@@ -29,10 +23,11 @@
 </template>
 
 <script setup lang="ts">
-import type { TreeCheckStrategy, TreeNode } from '@idux/components/tree'
-
 import { ref } from 'vue'
 
+import { CascaderStrategy } from '@idux/components/cascader'
+import { TreeNode } from '@idux/components/tree'
+
 const treeData: TreeNode[] = [
   {
     label: 'Node 0',
@@ -85,8 +80,7 @@ const checkedKeys = ref(['0'])
 const expandedKeys = ref(['0', '0-0', '0-1'])
 const selectedKeys = ref(['0-1'])
 
-const cascade = ref(true)
-const checkStrategy = ref<TreeCheckStrategy>('parent')
+const cascaderStrategy = ref<CascaderStrategy>('parent')
 const onCheck = (checked: boolean, node: TreeNode) => console.log('checked', checked, node)
 const onExpand = (expanded: boolean, node: TreeNode) => console.log('expanded', expanded, node)
 const onSelect = (selected: boolean, node: TreeNode) => console.log('selected', selected, node)
diff --git a/packages/components/tree/docs/Api.zh.md b/packages/components/tree/docs/Api.zh.md
index 5f1201cbb..db57ed197 100644
--- a/packages/components/tree/docs/Api.zh.md
+++ b/packages/components/tree/docs/Api.zh.md
@@ -12,10 +12,9 @@
 | `v-model:selectedKeys` | 选中节点的 `key` 数组 | `VKey[]` | - | - | - |
 | `autoHeight` | 是否自适应高度 | `boolean` | `false` | ✅ | - |
 | `blocked` | 节点整行撑开 | `boolean` | `false` | ✅ | - |
-| `cascade` | 是否开启级联功能 | `boolean` | `false` | - | - |
+| `cascaderStrategy` | 设置级联策略 | `'all' \| 'parent' \| 'child'` | `'off'` | `off` | 具体用法参见 [级联策略](#components-tree-demo-CascaderStrategy) |
 | `checkable` | 是否显示选择框 | `boolean` | `false` | - | - |
 | `checkOnClick` | 是否允许点击节点进行勾选 | `boolean` | `false` | - | 仅在`checkable`为`true`时生效 |
-| `checkStrategy` | 勾选策略 | `'all' \| 'parent' \| 'child'` | `'all'` | - | 设置勾选策略来指定显示的勾选节点，`all` 表示显示全部选中节点；`parent` 表示只显示父节点（当父节点下所有子节点都选中时）；`child` 表示只显示子节点，仅当`cascade`为`true`时，`parent`和`child`才生效 |
 | `childrenKey` | 替代[TreeNode](#TreeNode)中的`children`字段 | `string` | `children` | ✅ | - |
 | `customAdditional` | 自定义节点的额外属性 | `TreeCustomAdditional` | - | - | 例如 `class`, 或者原生事件 |
 | `dataSource` | 树型数据数组,参见[TreeNode](#TreeNode) | `TreeNode[]` | `[]` | - | - |
diff --git a/packages/components/tree/src/Tree.tsx b/packages/components/tree/src/Tree.tsx
index 146a0994a..01ebf2fc8 100644
--- a/packages/components/tree/src/Tree.tsx
+++ b/packages/components/tree/src/Tree.tsx
@@ -14,7 +14,7 @@ import { computed, defineComponent, provide, ref } from 'vue'
 import { isNil } from 'lodash-es'
 
 import { CdkVirtualScroll } from '@idux/cdk/scroll'
-import { type VKey, callEmit } from '@idux/cdk/utils'
+import { Logger, type VKey, callEmit } from '@idux/cdk/utils'
 import { ɵEmpty } from '@idux/components/_private/empty'
 import { useGlobalConfig } from '@idux/components/config'
 import { useGetKey } from '@idux/components/utils'
@@ -49,6 +49,11 @@ export default defineComponent({
     const mergedPrefixCls = computed(() => `${common.prefixCls}-tree`)
     const config = useGlobalConfig('tree')
 
+    // TODO: remove
+    const mergedCascaderStrategy = computed(() => {
+      return props.cascade ? props.checkStrategy : props.cascaderStrategy
+    })
+
     const autoHeight = computed(() => props.autoHeight ?? config.autoHeight)
     const mergedChildrenKey = computed(() => props.childrenKey ?? config.childrenKey)
     const mergedGetKey = useGetKey(props, config, 'components/tree')
@@ -68,7 +73,7 @@ export default defineComponent({
       searchedKeys,
     )
     const flattedNodes = useFlattedNodes(mergedNodes, expandableContext, props, searchedKeys)
-    const checkableContext = useCheckable(props, mergedNodeMap)
+    const checkableContext = useCheckable(props, mergedNodeMap, mergedCascaderStrategy)
     const dragDropContext = useDragDrop(props, config, expandableContext)
     const selectableContext = useSelectable(props, mergedNodeMap)
 
@@ -162,6 +167,14 @@ export default defineComponent({
       )
     }
 
+    if (__DEV__) {
+      props.cascade &&
+        Logger.warn(
+          'components/tree',
+          '`cascade` and `checkStrategy` are deprecated, please use `cascaderStrategy` instead.',
+        )
+    }
+
     return () => {
       const nodes = flattedNodes.value
 
diff --git a/packages/components/tree/src/composables/useCheckable.ts b/packages/components/tree/src/composables/useCheckable.ts
index 194c1d7b7..27447c061 100644
--- a/packages/components/tree/src/composables/useCheckable.ts
+++ b/packages/components/tree/src/composables/useCheckable.ts
@@ -5,17 +5,16 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { CheckStrategy, TreeNode, TreeProps } from '../types'
-import type { MergedNode } from './useDataSource'
-import type { ComputedRef, WritableComputedRef } from 'vue'
-
-import { computed } from 'vue'
+import { type ComputedRef, type WritableComputedRef, computed } from 'vue'
 
 import { isNil } from 'lodash-es'
 
-import { VKey, callEmit, useControlledProp } from '@idux/cdk/utils'
+import { type VKey, callEmit, useControlledProp } from '@idux/cdk/utils'
+import { type CascaderStrategy } from '@idux/components/cascader'
 
+import { type TreeNode, type TreeProps } from '../types'
 import { callChange, getChildrenKeys, getParentKeys } from '../utils'
+import { type MergedNode } from './useDataSource'
 
 export interface CheckableContext {
   checkedKeys: WritableComputedRef<VKey[]>
@@ -25,7 +24,11 @@ export interface CheckableContext {
   handleCheck: (node: MergedNode) => void
 }
 
-export function useCheckable(props: TreeProps, mergedNodeMap: ComputedRef<Map<VKey, MergedNode>>): CheckableContext {
+export function useCheckable(
+  props: TreeProps,
+  mergedNodeMap: ComputedRef<Map<VKey, MergedNode>>,
+  mergedCascaderStrategy: ComputedRef<CascaderStrategy>,
+): CheckableContext {
   const [checkedKeys, setCheckedKeys] = useControlledProp(props, 'checkedKeys', () => [])
 
   const checkDisabledKeys = computed(() => {
@@ -42,7 +45,7 @@ export function useCheckable(props: TreeProps, mergedNodeMap: ComputedRef<Map<VK
 
   // allCheckedKeys控制勾选框的勾选状态，checkedKeys控制回调的返回值
   const allCheckedKeys = computed(() => {
-    if (props.cascade) {
+    if (mergedCascaderStrategy.value !== 'off') {
       return findAllCheckedKeys(mergedNodeMap.value, checkedKeys.value, checkDisabledKeys.value)
     } else {
       return checkedKeys.value
@@ -51,7 +54,7 @@ export function useCheckable(props: TreeProps, mergedNodeMap: ComputedRef<Map<VK
 
   const indeterminateKeys = computed(() => {
     const _checkedKeys = allCheckedKeys.value
-    if (_checkedKeys.length === 0 || !props.cascade) {
+    if (_checkedKeys.length === 0 || mergedCascaderStrategy.value === 'off') {
       return []
     }
 
@@ -82,7 +85,9 @@ export function useCheckable(props: TreeProps, mergedNodeMap: ComputedRef<Map<VK
     const currKey = node.key
     const nodeMap = mergedNodeMap.value
     const disabledKeys = checkDisabledKeys.value
-    const childrenKeys = props.cascade ? getChildrenKeys(node, disabledKeys) : []
+    const cascaderStrategy = mergedCascaderStrategy.value
+    const cascaderEnabled = cascaderStrategy !== 'off'
+    const childrenKeys = cascaderEnabled ? getChildrenKeys(node, disabledKeys) : []
     const index = allCheckedKeys.value.indexOf(currKey)
     const checked = index > -1
     let tempKeys = [...allCheckedKeys.value]
@@ -92,22 +97,20 @@ export function useCheckable(props: TreeProps, mergedNodeMap: ComputedRef<Map<VK
       (childrenKeys.length &&
         childrenKeys.every(key => tempKeys.includes(key) || indeterminateKeys.value.includes(key)))
     ) {
-      const parentKeys = props.cascade ? getParentKeys(nodeMap, node, disabledKeys) : []
+      const parentKeys = cascaderEnabled ? getParentKeys(nodeMap, node, disabledKeys) : []
       tempKeys.splice(index, 1)
       tempKeys = tempKeys.filter(key => !parentKeys.includes(key) && !childrenKeys.includes(key))
     } else {
       tempKeys.push(currKey)
-      props.cascade && setParentChecked(nodeMap, node, tempKeys, disabledKeys)
+      cascaderEnabled && setParentChecked(nodeMap, node, tempKeys, disabledKeys)
       tempKeys.push(...childrenKeys)
     }
 
-    tempKeys = [...new Set(tempKeys)]
-
-    if (props.cascade) {
-      tempKeys = processAllCheckedKeysByCheckStrategy(nodeMap, tempKeys, disabledKeys, props.checkStrategy)
-    }
-
-    handleChange(checked, node.rawNode, tempKeys)
+    handleChange(
+      checked,
+      node.rawNode,
+      processAllCheckedKeysByCheckStrategy(cascaderStrategy, tempKeys, nodeMap, disabledKeys),
+    )
   }
 
   const handleChange = (checked: boolean, rawNode: TreeNode, newKeys: VKey[]) => {
@@ -145,13 +148,16 @@ function setParentChecked(
   }
 }
 function processAllCheckedKeysByCheckStrategy(
-  dataMap: Map<VKey, MergedNode>,
+  cascaderStrategy: CascaderStrategy,
   checkedKys: VKey[],
+  dataMap: Map<VKey, MergedNode>,
   disabledKeys: VKey[],
-  checkStrategy: CheckStrategy,
 ) {
-  let res: VKey[] = []
+  if (cascaderStrategy === 'off') {
+    return [...new Set(checkedKys)]
+  }
 
+  let res: VKey[] = []
   checkedKys = filterCheckedKeysWithDisabled(dataMap, checkedKys, disabledKeys)
 
   // 将禁用且勾选的节点先push
@@ -165,11 +171,11 @@ function processAllCheckedKeysByCheckStrategy(
       const selfKey = currNode.key
       const parentKey = currNode.parentKey
 
-      if (checkStrategy === 'parent') {
+      if (cascaderStrategy === 'parent') {
         if (!checkedKys.includes(parentKey!)) {
           res.push(selfKey)
         }
-      } else if (checkStrategy === 'child') {
+      } else if (cascaderStrategy === 'child') {
         if (currNode.isLeaf) {
           res.push(selfKey)
         }
diff --git a/packages/components/tree/src/types.ts b/packages/components/tree/src/types.ts
index c305a444a..89f464a82 100644
--- a/packages/components/tree/src/types.ts
+++ b/packages/components/tree/src/types.ts
@@ -10,6 +10,7 @@
 import type { MergedNode } from './composables/useDataSource'
 import type { VirtualScrollToFn } from '@idux/cdk/scroll'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
+import type { CascaderStrategy } from '@idux/components/cascader'
 import type { EmptyProps } from '@idux/components/empty'
 import type { DefineComponent, HTMLAttributes, PropType, StyleValue } from 'vue'
 
@@ -30,6 +31,15 @@ export const treeProps = {
     type: Boolean,
     default: undefined,
   },
+  cascaderStrategy: { type: String as PropType<CascaderStrategy>, default: 'off' },
+  /**
+   * @deprecated please use `cascaderStrategy` instead'
+   *
+   *  * cascade: false + checkStrategy: 'all' = cascaderStrategy: 'off'
+   *  * cascade: true + checkStrategy: 'all' = cascaderStrategy: 'all'
+   *  * cascade: true + checkStrategy: 'parent' = cascaderStrategy: 'parent'
+   *  * cascade: true + checkStrategy: 'child' = cascaderStrategy: 'child'
+   */
   cascade: {
     type: Boolean,
     default: false,
@@ -39,6 +49,14 @@ export const treeProps = {
     default: false,
   },
   childrenKey: String,
+  /**
+   * @deprecated please use `cascaderStrategy` instead'
+   *
+   *  * cascade: false + checkStrategy: 'all' = cascaderStrategy: 'off'
+   *  * cascade: true + checkStrategy: 'all' = cascaderStrategy: 'all'
+   *  * cascade: true + checkStrategy: 'parent' = cascaderStrategy: 'parent'
+   *  * cascade: true + checkStrategy: 'child' = cascaderStrategy: 'child'
+   */
   checkStrategy: {
     type: String as PropType<CheckStrategy>,
     default: 'all',
diff --git a/packages/pro/transfer/docs/Api.zh.md b/packages/pro/transfer/docs/Api.zh.md
index 7e8420c43..06830f238 100644
--- a/packages/pro/transfer/docs/Api.zh.md
+++ b/packages/pro/transfer/docs/Api.zh.md
@@ -78,7 +78,7 @@ export type ProTransferTreeProps = Pick<
   | 'onExpand'
   | 'onExpandedChange'
 > & {
-  cascaderStrategy: TreeProps['checkStrategy']
+  cascaderStrategy: CascaderStrategy
 }
 ```
 
diff --git a/packages/pro/transfer/src/composables/useTransferTreeProps.ts b/packages/pro/transfer/src/composables/useTransferTreeProps.ts
index c2bdd41ff..6f66f41c5 100644
--- a/packages/pro/transfer/src/composables/useTransferTreeProps.ts
+++ b/packages/pro/transfer/src/composables/useTransferTreeProps.ts
@@ -82,10 +82,9 @@ export function useTransferTreeProps(
       autoHeight: !height || !props.virtual,
       ...(props.treeProps ?? {}),
       blocked: true,
-      cascade: true,
       childrenKey: childrenKey.value,
       checkable: isSource || props.mode !== 'immediate',
-      checkStrategy: props.treeProps?.cascaderStrategy,
+      cascaderStrategy: props.treeProps?.cascaderStrategy || 'all',
       checkedKeys: checkedKeys.value,
       dataSource: treeDataSource.value,
       disabled: node => _disabledKeys.value.has(getKey.value(node as TransferData)) || !!props.disabled,
diff --git a/packages/pro/transfer/src/composables/useTreeDataStrategy.ts b/packages/pro/transfer/src/composables/useTreeDataStrategy.ts
index d9cf0f6ef..5b40e2e27 100644
--- a/packages/pro/transfer/src/composables/useTreeDataStrategy.ts
+++ b/packages/pro/transfer/src/composables/useTreeDataStrategy.ts
@@ -5,22 +5,22 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { TreeTransferData } from '../types'
-import type { VKey } from '@idux/cdk/utils'
-import type { TransferDataStrategiesConfig } from '@idux/components/transfer'
-import type { TreeCheckStrategy } from '@idux/components/tree'
-import type { GetKeyFn } from '@idux/components/utils'
-
 import { type ComputedRef, type Ref, onUnmounted, ref } from 'vue'
 
 import { isNil } from 'lodash-es'
 
+import { type VKey } from '@idux/cdk/utils'
+import { type CascaderStrategy } from '@idux/components/cascader'
+import { type TransferDataStrategiesConfig } from '@idux/components/transfer'
+import { type GetKeyFn } from '@idux/components/utils'
+
+import { type TreeTransferData } from '../types'
 import { combineTrees, filterTree, genFlattenedTreeKeys, traverseTree } from '../utils'
 
 export function useTreeDataStrategies<C extends VKey>(
   childrenKey: ComputedRef<C>,
   defaultTreeData: TreeTransferData<C>[] | undefined,
-  checkStrategy: TreeCheckStrategy = 'all',
+  cascaderStrategy: CascaderStrategy = 'all',
 ): {
   dataKeyMap: Map<VKey, TreeTransferData<C>>
   parentKeyMap: Map<VKey, VKey | undefined>
@@ -98,7 +98,7 @@ export function useTreeDataStrategies<C extends VKey>(
 
         return filterTree(data, childrenKey.value, item => searchFn(item, searchValue), 'or')
       },
-      ...createStrategy(childrenKey, cachedTargetData, parentKeyMap, dataKeyMap, checkStrategy),
+      ...createStrategy(childrenKey, cachedTargetData, parentKeyMap, dataKeyMap, cascaderStrategy),
     },
   }
 }
@@ -122,13 +122,14 @@ function createStrategy<C extends VKey>(
   cachedTargetData: Ref<TreeTransferData<C>[]>,
   parentKeyMap: Map<VKey, VKey | undefined>,
   dataKeyMap: Map<VKey, TreeTransferData<C>>,
-  checkStrategy: TreeCheckStrategy,
+  cascaderStrategy: CascaderStrategy,
 ) {
-  switch (checkStrategy) {
+  switch (cascaderStrategy) {
     case 'parent':
       return createParentStrategy(childrenKey, cachedTargetData, dataKeyMap)
     case 'child':
       return createChildStrategy(childrenKey, cachedTargetData, parentKeyMap)
+    // TODO: support 'off'
     case 'all':
     default:
       return createAllStrategy(childrenKey, cachedTargetData, parentKeyMap)
@@ -232,16 +233,16 @@ function createParentStrategy<C extends VKey>(
 function createSeparateDataSourceFn<C extends VKey>(
   childrenKey: ComputedRef<C>,
   cachedTargetData: Ref<TreeTransferData<C>[]>,
-  checkStrategy: TreeCheckStrategy,
+  cascaderStrategy: CascaderStrategy,
 ): Exclude<TransferDataStrategiesConfig<TreeTransferData<C>>['separateDataSource'], undefined> {
   const getFilterFn = (
     selectedKeySet: Set<VKey>,
     getKey: GetKeyFn,
   ): ((data: TreeTransferData<C>[], isSource: boolean) => TreeTransferData<C>[]) => {
-    // under checkStrategy `parent`, selected child nodes are not in selectedKeys
+    // under cascaderStrategy `parent`, selected child nodes are not in selectedKeys
     // so we consider the item is selected when its parent exists in selectedKeys
     const filterFn: (item: TreeTransferData<C>, parent: TreeTransferData<C>[], isSource: boolean) => boolean =
-      checkStrategy === 'all' || checkStrategy === 'child'
+      cascaderStrategy === 'all' || cascaderStrategy === 'child'
         ? (item, _, isSource) => selectedKeySet.has(getKey(item)) !== isSource
         : (item, parent, isSource) => [item, ...parent].map(getKey).some(key => selectedKeySet.has(key)) !== isSource
 
diff --git a/packages/pro/transfer/src/types.ts b/packages/pro/transfer/src/types.ts
index c2d535ee5..74aa63843 100644
--- a/packages/pro/transfer/src/types.ts
+++ b/packages/pro/transfer/src/types.ts
@@ -9,6 +9,7 @@
 
 import type { VirtualScrollToFn } from '@idux/cdk/scroll'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
+import type { CascaderStrategy } from '@idux/components/cascader'
 import type { EmptyProps } from '@idux/components/empty'
 import type { TableColumn, TableProps } from '@idux/components/table'
 import type {
@@ -44,7 +45,7 @@ export type ProTransferTreeProps = Pick<
   | 'onExpand'
   | 'onExpandedChange'
 > & {
-  cascaderStrategy: TreeProps['checkStrategy']
+  cascaderStrategy: CascaderStrategy
 }
 
 export const proTransferProps = {
diff --git a/packages/pro/tree/src/ProTree.tsx b/packages/pro/tree/src/ProTree.tsx
index b02a54aa8..e69f154bc 100644
--- a/packages/pro/tree/src/ProTree.tsx
+++ b/packages/pro/tree/src/ProTree.tsx
@@ -91,11 +91,10 @@ export default defineComponent({
 
         autoHeight: true,
         blocked: true,
-        cascade: true,
         childrenKey: props.childrenKey,
         checkable: props.checkable,
         checkOnClick: props.checkOnClick,
-        checkStrategy: props.cascaderStrategy,
+        cascaderStrategy: props.cascaderStrategy,
         customAdditional: props.customAdditional,
         dataSource: props.dataSource,
         disabled: props.disabled,