From 62a393752db305e63cede153ef9b6fcf7beb5125 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Thu, 23 Dec 2021 11:40:29 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20selectTrigger=E7=9A=84focus/blur?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8=E6=8A=9B?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/popper/useTrigger.js             |  2 ++
 components/select-tree/selectTree.vue       | 27 +++++++++++++++++++--
 components/select-tree/style/index.less     |  4 +--
 components/select-trigger/label.vue         |  2 ++
 components/select-trigger/selectTrigger.vue |  4 +--
 components/select/select.vue                | 26 +++++++++++++++++++-
 components/select/style/index.less          |  4 +--
 7 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/components/popper/useTrigger.js b/components/popper/useTrigger.js
index 0c41a244..79359da6 100644
--- a/components/popper/useTrigger.js
+++ b/components/popper/useTrigger.js
@@ -49,6 +49,8 @@ export default function useTrigger(
     };
 
     const popperEventsHandler = (e, t) => {
+        // 不是用户触发的行为
+        e.stopPropagation();
         switch (e.type) {
             case 'click': {
                 if (t === 'contextmenu') {
diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue
index 6d8eac69..2a1faabc 100644
--- a/components/select-tree/selectTree.vue
+++ b/components/select-tree/selectTree.vue
@@ -13,6 +13,7 @@
         >
             <template #trigger>
                 <SelectTrigger
+                    ref="triggerRef"
                     :selectedOptions="selectedOptions"
                     :disabled="disabled"
                     :clearable="clearable"
@@ -30,7 +31,10 @@
                 />
             </template>
             <template #default>
-                <Scrollbar :containerClass="`${prefixCls}-dropdown`">
+                <Scrollbar
+                    :containerStyle="dropdownStyle"
+                    :containerClass="`${prefixCls}-dropdown`"
+                >
                     <Tree
                         v-show="data.length"
                         ref="refTree"
@@ -63,7 +67,7 @@
     </div>
 </template>
 <script>
-import { defineComponent, ref, unref, watch, computed } from 'vue';
+import { defineComponent, ref, unref, watch, computed, onMounted } from 'vue';
 import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
 import { useNormalModel, useArrayModel } from '../_util/use/useModel';
@@ -200,6 +204,23 @@ export default defineComponent({
         });
         const filterMethod = (value, node) => node.label.indexOf(value) !== -1;
 
+        const triggerRef = ref();
+        const triggerWidth = ref(0);
+
+        onMounted(() => {
+            if (triggerRef.value) {
+                triggerWidth.value = triggerRef.value.$el.offsetWidth;
+            }
+        });
+
+        const dropdownStyle = computed(() => {
+            const style = {};
+            if (triggerWidth.value) {
+                style['min-width'] = `${triggerWidth.value}px`;
+            }
+            return style;
+        });
+
         return {
             prefixCls,
             isOpened,
@@ -217,6 +238,8 @@ export default defineComponent({
             checkedKeys,
             refTree,
             filterMethod,
+            triggerRef,
+            dropdownStyle,
         };
     },
 });
diff --git a/components/select-tree/style/index.less b/components/select-tree/style/index.less
index b2569b20..2db9c9cf 100644
--- a/components/select-tree/style/index.less
+++ b/components/select-tree/style/index.less
@@ -14,12 +14,12 @@
     vertical-align: middle;
     .text();
     &-popper {
-        min-width: @select-dropdown-min-width;
-        max-width: @select-dropdown-max-width;
         .text();
         background: var(--f-white);
     }
     &-dropdown {
+        min-width: @select-dropdown-min-width;
+        max-width: @select-dropdown-max-width;
         max-height: @select-dropdown-max-height;
         padding: @select-dropdown-padding;
     }
diff --git a/components/select-trigger/label.vue b/components/select-trigger/label.vue
index 3ba37644..f1ea7262 100644
--- a/components/select-trigger/label.vue
+++ b/components/select-trigger/label.vue
@@ -142,6 +142,7 @@ export default {
                 if (isOpened) {
                     nextTick(() => {
                         if (!inputRef.value) return;
+                        if (!props.filterable) return;
                         inputRef.value.focus();
                     });
                 } else {
@@ -158,6 +159,7 @@ export default {
                 filterText.value = '';
                 nextTick(() => {
                     if (!inputRef.value) return;
+                    if (!props.filterable) return;
                     inputRef.value.focus();
                 });
             }
diff --git a/components/select-trigger/selectTrigger.vue b/components/select-trigger/selectTrigger.vue
index 04933f52..fc83f926 100644
--- a/components/select-trigger/selectTrigger.vue
+++ b/components/select-trigger/selectTrigger.vue
@@ -4,8 +4,8 @@
         :class="triggerClass"
         @mouseenter="inputHovering = true"
         @mouseleave="inputHovering = false"
-        @focus="handleFocus"
-        @blur="handleBlur"
+        @focusin="handleFocus"
+        @focusout="handleBlur"
     >
         <Label
             :isOpened="isOpened"
diff --git a/components/select/select.vue b/components/select/select.vue
index a3fcec22..1f7967ed 100644
--- a/components/select/select.vue
+++ b/components/select/select.vue
@@ -13,6 +13,7 @@
         >
             <template #trigger>
                 <SelectTrigger
+                    ref="triggerRef"
                     :selectedOptions="selectedOptions"
                     :disabled="disabled"
                     :clearable="clearable"
@@ -30,7 +31,10 @@
                 />
             </template>
             <template #default>
-                <Scrollbar :containerClass="`${prefixCls}-dropdown`">
+                <Scrollbar
+                    :containerStyle="dropdownStyle"
+                    :containerClass="`${prefixCls}-dropdown`"
+                >
                     <slot>
                         <div :class="`${prefixCls}-null`">{{ emptyText }}</div>
                     </slot>
@@ -48,6 +52,7 @@ import {
     reactive,
     watch,
     computed,
+    onMounted,
 } from 'vue';
 import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
@@ -183,6 +188,23 @@ export default defineComponent({
             filterText.value = val;
         };
 
+        const triggerRef = ref();
+        const triggerWidth = ref(0);
+
+        onMounted(() => {
+            if (triggerRef.value) {
+                triggerWidth.value = triggerRef.value.$el.offsetWidth;
+            }
+        });
+
+        const dropdownStyle = computed(() => {
+            const style = {};
+            if (triggerWidth.value) {
+                style['min-width'] = `${triggerWidth.value}px`;
+            }
+            return style;
+        });
+
         return {
             prefixCls,
             isOpened,
@@ -193,6 +215,8 @@ export default defineComponent({
             focus,
             blur,
             handleFilterTextChange,
+            triggerRef,
+            dropdownStyle,
         };
     },
 });
diff --git a/components/select/style/index.less b/components/select/style/index.less
index 0c90fc77..861fed66 100644
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@@ -17,12 +17,12 @@
     vertical-align: middle;
     .text();
     &-popper {
-        min-width: @select-dropdown-min-width;
-        max-width: @select-dropdown-max-width;
         .text();
         background: var(--f-white);
     }
     &-dropdown {
+        min-width: @select-dropdown-min-width;
+        max-width: @select-dropdown-max-width;
         max-height: @select-dropdown-max-height;
         padding: @select-dropdown-padding;
     }

From d6478b4dee511f4136ef4251029765d884e73511 Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Thu, 23 Dec 2021 20:04:05 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20tree=E6=94=B9=E5=8F=98=E7=BA=A7?=
 =?UTF-8?q?=E8=81=94=E5=AD=97=E6=AE=B5=E5=92=8C=E5=A2=9E=E5=8A=A0=E7=BA=A7?=
 =?UTF-8?q?=E8=81=94=E6=98=BE=E7=A4=BA=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/select-tree/selectTree.vue         |  82 +++++++----
 components/tree/const.js                      |   6 +
 components/tree/props.js                      |  13 +-
 components/tree/tree.jsx                      | 139 +++++++-----------
 components/tree/useData.js                    | 127 ++++++++++++++++
 components/tree/useState.js                   |  64 ++++++++
 components/tree/useTreeNode.js                |  39 +----
 .../.vitepress/components/selectTree/index.md |   3 +-
 .../components/selectTree/multiple.vue        |  67 +++++----
 docs/.vitepress/components/tree/checkable.vue |  56 +++----
 docs/.vitepress/components/tree/expandAll.vue |  39 -----
 docs/.vitepress/components/tree/index.md      |  23 +--
 docs/.vitepress/components/tree/inline.vue    |   2 +-
 13 files changed, 398 insertions(+), 262 deletions(-)
 create mode 100644 components/tree/useData.js
 create mode 100644 components/tree/useState.js
 delete mode 100644 docs/.vitepress/components/tree/expandAll.vue

diff --git a/components/select-tree/selectTree.vue b/components/select-tree/selectTree.vue
index 2a1faabc..b6322e52 100644
--- a/components/select-tree/selectTree.vue
+++ b/components/select-tree/selectTree.vue
@@ -47,6 +47,7 @@
                         :selectable="treeSelectable"
                         :checkable="treeCheckable"
                         :checkStrictly="checkStrictly"
+                        :cascade="cascade"
                         :multiple="multiple"
                         :childrenField="childrenField"
                         :valueField="valueField"
@@ -55,8 +56,8 @@
                         :inline="inline"
                         :remote="remote"
                         :loadData="loadData"
-                        @update:selectedKeys="handleSelect"
-                        @update:checkedKeys="handleSelect"
+                        @select="handleSelect"
+                        @check="handleCheck"
                     ></Tree>
                     <div v-show="!data.length" :class="`${prefixCls}-null`">
                         {{ emptyText }}
@@ -79,7 +80,7 @@ import Tree from '../tree';
 import Scrollbar from '../scrollbar';
 import SELECT_PROPS from '../select/props';
 import TREE_PROPS from '../tree/props';
-import { flatNodes } from '../_util/utils';
+import useData from '../tree/useData';
 
 const prefixCls = getPrefixCls('select-tree');
 
@@ -123,7 +124,9 @@ export default defineComponent({
             validate(CHANGE_EVENT);
         });
 
-        const nodes = computed(() => flatNodes(props.data));
+        const { nodeList, getChildrenByValues, getParentByValues } =
+            useData(props);
+
         const treeSelectable = computed(() => !props.multiple);
         const treeCheckable = computed(() => props.multiple);
         const selectedKeys = computed(() => {
@@ -132,24 +135,57 @@ export default defineComponent({
             return [];
         });
         const checkedKeys = computed(() => {
-            if (props.multiple) return currentValue.value;
+            if (props.multiple) {
+                if (!props.cascade) {
+                    return currentValue.value;
+                }
+                if (props.checkStrictly === 'all') {
+                    return currentValue.value;
+                }
+                if (props.checkStrictly === 'parent') {
+                    return getChildrenByValues(currentValue.value);
+                }
+                if (props.checkStrictly === 'child') {
+                    return getParentByValues(currentValue.value);
+                }
+            }
             return [];
         });
 
+        watch(
+            () => props.checkStrictly,
+            () => {
+                if (props.multiple && props.cascade) {
+                    updateCurrentValue([]);
+                }
+            },
+        );
+
         const handleClear = () => {
             const value = props.multiple ? [] : null;
             updateCurrentValue(value);
             emit('clear');
         };
 
-        const handleSelect = (value) => {
+        const handleSelect = (data) => {
             if (props.disabled) return;
             filterText.value = '';
             if (!props.multiple) {
-                updateCurrentValue(value[0]);
+                updateCurrentValue(data.selectedKeys[0]);
                 isOpened.value = false;
             } else {
-                updateCurrentValue(value);
+                updateCurrentValue(data.selectedKeys);
+            }
+        };
+
+        const handleCheck = (data) => {
+            if (props.disabled) return;
+            filterText.value = '';
+            if (!props.multiple) {
+                updateCurrentValue(data.checkedKeys[0]);
+                isOpened.value = false;
+            } else {
+                updateCurrentValue(data.checkedKeys);
             }
         };
 
@@ -157,32 +193,21 @@ export default defineComponent({
             if (!props.multiple) {
                 return;
             }
-            const arr = currentValue.value;
-            const findIndex = arr.indexOf(value);
+            const findIndex = currentValue.value.indexOf(value);
             if (findIndex !== -1) {
                 emit('removeTag', value);
-                arr.splice(findIndex, 1);
-                updateCurrentValue(arr);
+                // arrayModel会自动添加或者删除
+                updateCurrentValue(value);
             }
         };
 
         const selectedOptions = computed(() =>
-            nodes.value
-                .map((option) => {
-                    const value = option[props.valueField];
-                    const label = option[props.labelField];
-                    return {
-                        ...option,
-                        value,
-                        label,
-                    };
-                })
-                .filter((option) => {
-                    if (props.multiple) {
-                        return currentValue.value.includes(option.value);
-                    }
-                    return [currentValue.value].includes(option.value);
-                }),
+            Object.values(nodeList).filter((option) => {
+                if (props.multiple) {
+                    return currentValue.value.includes(option.value);
+                }
+                return [currentValue.value].includes(option.value);
+            }),
         );
 
         const focus = (e) => {
@@ -235,6 +260,7 @@ export default defineComponent({
             selectedKeys,
             treeCheckable,
             handleSelect,
+            handleCheck,
             checkedKeys,
             refTree,
             filterMethod,
diff --git a/components/tree/const.js b/components/tree/const.js
index 8dee6079..aaecf437 100644
--- a/components/tree/const.js
+++ b/components/tree/const.js
@@ -3,3 +3,9 @@ export const PROVIDE_KEY = Symbol('FTree');
 export const COMPONENT_NAME = {
     TREE: 'FTree',
 };
+
+export const CHECK_STRATEGY = {
+    ALL: 'all',
+    PARENT: 'parent',
+    CHILD: 'child',
+};
diff --git a/components/tree/props.js b/components/tree/props.js
index d0c636d9..04dbf801 100644
--- a/components/tree/props.js
+++ b/components/tree/props.js
@@ -1,3 +1,5 @@
+import { CHECK_STRATEGY } from './const';
+
 const PROPS = {
     data: {
         type: Array,
@@ -30,14 +32,21 @@ const PROPS = {
             return [];
         },
     },
-    checkable: {
+    cascade: {
         type: Boolean,
         default: false,
     },
-    checkStrictly: {
+    checkable: {
         type: Boolean,
         default: false,
     },
+    checkStrictly: {
+        type: String,
+        default: 'all',
+        validator(value) {
+            return Object.values(CHECK_STRATEGY).includes(value);
+        },
+    },
     checkedKeys: {
         type: Array,
         default() {
diff --git a/components/tree/tree.jsx b/components/tree/tree.jsx
index 16931645..e709c926 100644
--- a/components/tree/tree.jsx
+++ b/components/tree/tree.jsx
@@ -1,11 +1,11 @@
-import { defineComponent, computed, provide, onMounted, ref, watch } from 'vue';
-import { isFunction, isString, isNil, cloneDeep } from 'lodash-es';
+import { defineComponent, computed, provide, onMounted } from 'vue';
+import { isFunction, isString, cloneDeep } from 'lodash-es';
 import getPrefixCls from '../_util/getPrefixCls';
 import { useTheme } from '../_theme/useTheme';
-import { useNormalModel } from '../_util/use/useModel';
 import TreeNode from './treeNode';
-import { PROVIDE_KEY, COMPONENT_NAME } from './const';
-import useFilter from './useFilter';
+import { PROVIDE_KEY, COMPONENT_NAME, CHECK_STRATEGY } from './const';
+import useData from './useData';
+import useState from './useState';
 import PROPS from './props';
 
 const prefixCls = getPrefixCls('tree');
@@ -26,81 +26,24 @@ export default defineComponent({
     ],
     setup(props, { emit, expose }) {
         useTheme();
-        const nodeList = {};
-        const addNode = (value, item) => {
-            if (!nodeList[value]) {
-                nodeList[value] = item;
-            }
-        };
-        const currentData = ref([]);
-        const transformNode = (item, indexPath, level) => {
-            const copy = { ...item };
-            const value = copy[props.valueField];
-            const label = copy[props.labelField];
-            const children = copy[props.childrenField];
-            const hasChildren = Array.isArray(children) && children.length;
-            let isLeaf;
-            if (!isNil(copy.isLeaf)) {
-                isLeaf = copy.isLeaf;
-            } else if (hasChildren) {
-                isLeaf = false;
-            } else if (props.remote) {
-                isLeaf = false;
-            } else {
-                isLeaf = true;
-            }
-            copy.origin = item;
-            copy.value = value;
-            copy.label = label;
-            copy.isLeaf = isLeaf;
-            // 处理indexPath
-            copy.indexPath = [...indexPath, value];
-            copy.level = level;
-            copy.hasChildren = hasChildren;
-            // 扁平化
-            addNode(value, copy);
-            return copy;
-        };
-        const handleData = (arr, indexPath = [], level = 1) =>
-            arr.map((item) => {
-                const copy = transformNode(item, indexPath, level);
-                if (copy.hasChildren) {
-                    copy.children = handleData(
-                        copy.children,
-                        copy.indexPath,
-                        level + 1,
-                    );
-                }
-                return copy;
-            });
 
-        watch(
-            () => props.data,
-            () => {
-                currentData.value = handleData(props.data);
-            },
-            {
-                immediate: true,
-                deep: true,
-            },
-        );
+        const { nodeList, currentData, handleData } = useData(props);
+
+        const {
+            currentExpandedKeys,
+            updateExpandedKeys,
+            currentCheckedKeys,
+            updateCheckedKeys,
+            currentSelectedKeys,
+            updateSelectedKeys,
+            filter,
+            hiddenKeys,
+            hasSelected,
+            hasChecked,
+            hasIndeterminate,
+            hasExpanded,
+        } = useState(props, { emit });
 
-        const [currentExpandedKeys, updateExpandedKeys] = useNormalModel(
-            props,
-            emit,
-            { prop: 'expandedKeys', isEqual: true },
-        );
-        const [currentCheckedKeys, updateCheckedKeys] = useNormalModel(
-            props,
-            emit,
-            { prop: 'checkedKeys', isEqual: true },
-        );
-        const [currentSelectedKeys, updateSelectedKeys] = useNormalModel(
-            props,
-            emit,
-            { prop: 'selectedKeys', isEqual: true },
-        );
-        const { filter, hiddenKeys, filteredExpandedKeys } = useFilter(props);
         onMounted(() => {
             if (
                 props.defaultExpandAll &&
@@ -111,6 +54,7 @@ export default defineComponent({
                 );
             }
         });
+
         const selectNode = (val, event) => {
             const node = nodeList[val];
             const values = cloneDeep(currentSelectedKeys.value);
@@ -137,6 +81,7 @@ export default defineComponent({
                 selected: values.includes(val),
             });
         };
+
         const expandNode = (val, event) => {
             const node = nodeList[val];
             let values = cloneDeep(currentExpandedKeys.value);
@@ -160,6 +105,30 @@ export default defineComponent({
                 expanded: values.includes(val),
             });
         };
+
+        function getCheckedKeys(arr) {
+            return props.cascade
+                ? arr.filter((key) => {
+                      const node = nodeList[key];
+                      if (props.checkStrictly === CHECK_STRATEGY.ALL) {
+                          return true;
+                      }
+                      if (props.checkStrictly === CHECK_STRATEGY.PARENT) {
+                          return (
+                              !node.isLeaf &&
+                              !hasIndeterminate(node) &&
+                              node.indexPath.filter((_key) =>
+                                  arr.includes(_key),
+                              ).length === 1
+                          );
+                      }
+                      if (props.checkStrictly === CHECK_STRATEGY.CHILD) {
+                          return node.isLeaf;
+                      }
+                      return true;
+                  })
+                : arr;
+        }
         function handleChildren(arr, children, isAdd) {
             children.forEach((child) => {
                 const index = arr.indexOf(child.value);
@@ -200,7 +169,7 @@ export default defineComponent({
             const { isLeaf, children, indexPath } = node;
             const values = cloneDeep(currentCheckedKeys.value);
             const index = values.indexOf(val);
-            if (props.checkStrictly) {
+            if (!props.cascade) {
                 if (index !== -1) {
                     values.splice(index, 1);
                 } else {
@@ -219,9 +188,10 @@ export default defineComponent({
                     handleChildren(values, children, true);
                 }
             }
+
             updateCheckedKeys(values);
             emit('check', {
-                checkedKeys: values,
+                checkedKeys: getCheckedKeys(values),
                 event,
                 node,
                 checked: values.includes(val),
@@ -240,12 +210,12 @@ export default defineComponent({
         provide(PROVIDE_KEY, {
             props,
             selectNode,
-            currentSelectedKeys,
             expandNode,
-            currentExpandedKeys,
             checkNode,
-            currentCheckedKeys,
-            filteredExpandedKeys,
+            hasSelected,
+            hasChecked,
+            hasIndeterminate,
+            hasExpanded,
         });
 
         const classList = computed(() => [prefixCls].filter(Boolean).join(' '));
@@ -285,6 +255,7 @@ export default defineComponent({
                 );
             });
         const renderTreeNode = () => renderChildren(currentData.value);
+
         return () => (
             <div class={classList.value} role="tree">
                 {renderTreeNode()}
diff --git a/components/tree/useData.js b/components/tree/useData.js
new file mode 100644
index 00000000..ac7f21a3
--- /dev/null
+++ b/components/tree/useData.js
@@ -0,0 +1,127 @@
+import { ref, reactive, watch } from 'vue';
+import { isNil, isArray } from 'lodash-es';
+
+export default (props) => {
+    const nodeList = reactive({});
+
+    const currentData = ref([]);
+
+    const getChildrenByValues = (values = []) => {
+        let arr = [...values];
+        values.forEach((value) => {
+            const node = nodeList[value];
+            if (isArray(node.children)) {
+                arr = arr.concat(
+                    getChildrenByValues(
+                        node.children.map((child) => child.value),
+                    ),
+                );
+            }
+        });
+        return arr;
+    };
+
+    const getParentByValues = (values = []) => {
+        const res = {};
+        values.forEach((value) => {
+            const node = nodeList[value];
+            if (!res[node.level]) {
+                res[node.level] = [];
+            }
+            res[node.level].push(node.value);
+        });
+        const levels = Object.keys(res);
+        const maxLevel = levels[levels.length - 1];
+        for (let level = maxLevel; level > 0; level--) {
+            const levelValues = res[level];
+            if (levelValues) {
+                levelValues.forEach((value) => {
+                    const node = nodeList[value];
+                    const parentValue =
+                        node.indexPath[node.indexPath.length - 2];
+                    if (parentValue) {
+                        const parentNode = nodeList[parentValue];
+                        if (
+                            parentNode.children.every((child) =>
+                                levelValues.includes(child.value),
+                            )
+                        ) {
+                            if (!res[level - 1]) {
+                                res[level - 1] = [];
+                            }
+                            if (!res[level - 1].includes(parentValue)) {
+                                res[level - 1].push(parentValue);
+                            }
+                        }
+                    }
+                });
+            }
+        }
+        let arr = [];
+        Object.values(res).forEach((levelValues) => {
+            arr = arr.concat(levelValues);
+        });
+        return arr;
+    };
+
+    const transformNode = (item, indexPath, level) => {
+        const copy = { ...item };
+        const value = copy[props.valueField];
+        const label = copy[props.labelField];
+        const children = copy[props.childrenField];
+        const hasChildren = Array.isArray(children) && children.length;
+        let isLeaf;
+        if (!isNil(copy.isLeaf)) {
+            isLeaf = copy.isLeaf;
+        } else if (hasChildren) {
+            isLeaf = false;
+        } else if (props.remote) {
+            isLeaf = false;
+        } else {
+            isLeaf = true;
+        }
+        copy.origin = item;
+        copy.value = value;
+        copy.label = label;
+        copy.isLeaf = isLeaf;
+        // 处理indexPath
+        copy.indexPath = [...indexPath, value];
+        copy.level = level;
+        copy.hasChildren = hasChildren;
+        return copy;
+    };
+
+    const handleData = (arr = [], indexPath = [], level = 1) =>
+        arr.map((item) => {
+            const copy = transformNode(item, indexPath, level);
+            // 扁平化
+            nodeList[copy.value] = copy;
+            if (copy.hasChildren) {
+                copy.children = handleData(
+                    copy.children,
+                    copy.indexPath,
+                    level + 1,
+                );
+            }
+            return copy;
+        });
+
+    watch(
+        () => props.data,
+        () => {
+            currentData.value = handleData(props.data);
+        },
+        {
+            immediate: true,
+            deep: true,
+        },
+    );
+
+    return {
+        nodeList,
+        currentData,
+        handleData,
+        getChildrenByValues,
+        getParentByValues,
+    };
+};
diff --git a/components/tree/useState.js b/components/tree/useState.js
new file mode 100644
index 00000000..9d0f0a26
--- /dev/null
+++ b/components/tree/useState.js
@@ -0,0 +1,64 @@
+import { useNormalModel } from '../_util/use/useModel';
+import useFilter from './useFilter';
+
+export default (props, { emit }) => {
+    const [currentExpandedKeys, updateExpandedKeys] = useNormalModel(
+        props,
+        emit,
+        { prop: 'expandedKeys', isEqual: true },
+    );
+    const [currentCheckedKeys, updateCheckedKeys] = useNormalModel(
+        props,
+        emit,
+        { prop: 'checkedKeys', isEqual: true },
+    );
+    const [currentSelectedKeys, updateSelectedKeys] = useNormalModel(
+        props,
+        emit,
+        { prop: 'selectedKeys', isEqual: true },
+    );
+    const { filter, hiddenKeys, filteredExpandedKeys } = useFilter(props);
+
+    const hasSelected = (value) => currentSelectedKeys.value.includes(value);
+    const hasChecked = (value) => currentCheckedKeys.value.includes(value);
+    const hasIndeterminate = (node) => {
+        const value = node[props.valueField];
+        if (hasChecked(value)) {
+            return false;
+        }
+        if (node.isLeaf) {
+            return false;
+        }
+        return (
+            Array.isArray(node.children) &&
+            node.children.some(
+                (item) =>
+                    hasChecked(item[props.valueField]) ||
+                    hasIndeterminate(item),
+            )
+        );
+    };
+
+    const hasExpanded = (value) => {
+        if (filteredExpandedKeys.length) {
+            return filteredExpandedKeys.includes(value);
+        }
+        return currentExpandedKeys.value.includes(value);
+    };
+
+    return {
+        currentExpandedKeys,
+        updateExpandedKeys,
+        currentCheckedKeys,
+        updateCheckedKeys,
+        currentSelectedKeys,
+        updateSelectedKeys,
+        filter,
+        hiddenKeys,
+        filteredExpandedKeys,
+        hasSelected,
+        hasChecked,
+        hasIndeterminate,
+        hasExpanded,
+    };
+};
diff --git a/components/tree/useTreeNode.js b/components/tree/useTreeNode.js
index 1e9a43e9..84edc58f 100644
--- a/components/tree/useTreeNode.js
+++ b/components/tree/useTreeNode.js
@@ -4,38 +4,15 @@ import { PROVIDE_KEY } from './const';
 export default (props) => {
     const root = inject(PROVIDE_KEY);
 
-    const hasSelected = value => root.currentSelectedKeys.value.includes(value);
-    const hasChecked = value => root.currentCheckedKeys.value.includes(value);
-    const hasIndeterminate = (node) => {
-        const value = node[root.props.valueField];
-        if (hasChecked(value)) {
-            return false;
-        }
-        if (node.isLeaf) {
-            return false;
-        }
-        return (
-            Array.isArray(node.children)
-            && node.children.some(
-                item => hasChecked(item[root.props.valueField])
-                    || hasIndeterminate(item),
-            )
-        );
-    };
-
-    const isExpanded = computed(() => {
-        if (root.filteredExpandedKeys.length) {
-            return root.filteredExpandedKeys.includes(props.value);
-        }
-        return root.currentExpandedKeys.value.includes(props.value);
-    });
-    const isSelected = computed(() => hasSelected(props.value));
-    const isChecked = computed(() => hasChecked(props.value));
-    const isIndeterminate = computed(() => hasIndeterminate(props.node));
+    const isExpanded = computed(() => root.hasExpanded(props.value));
+    const isSelected = computed(() => root.hasSelected(props.value));
+    const isChecked = computed(() => root.hasChecked(props.value));
+    const isIndeterminate = computed(() => root.hasIndeterminate(props.node));
     const isChildrenInline = computed(
-        () => root.props.inline
-            && !props.isLeaf
-            && props.node.children.every(item => item.isLeaf),
+        () =>
+            root.props.inline &&
+            !props.isLeaf &&
+            props.node.children.every((item) => item.isLeaf),
     );
 
     return {
diff --git a/docs/.vitepress/components/selectTree/index.md b/docs/.vitepress/components/selectTree/index.md
index 54d2d794..f096c470 100644
--- a/docs/.vitepress/components/selectTree/index.md
+++ b/docs/.vitepress/components/selectTree/index.md
@@ -70,7 +70,8 @@ app.use(FSelectTree);
 | accordion             | 手风琴模式，是否保持同级节点中只有一个节点展开                          | boolean                                   | `false`    |
 | defaultExpandAll      | 是否默认展开所有节点，当有 `expandedKeys` 时，`defaultExpandAll` 将失效 | boolean                                   | `false`    |
 | expandedKeys(v-model) | 展开的节点的 key 的数组                                                 | Array<string \| number>                   | `[]`       |
-| checkStrictly         | `checkable` 状态下节点选择完全受控（父子节点选中状态不再关联）          | boolean                                   | `false`    |
+| cascade             | `checkable` 状态下节点选择完全受控（父子节点选中状态关联）                                           | boolean                                   | `false`    |
+| checkStrictly         | 设置勾选策略来指定勾选回调返回的值，`all` 表示回调函数值为全部选中节点；`parent` 表示回调函数值为父节点（当父节点下所有子节点都选中时）；`child` 表示回调函数值为子节点          | string                                   | `all`    |
 | childrenField         | 替代 `TreeOption` 中的 `children` 字段名                                | string                                    | `children` |
 | valueField            | 替代 `TreeOption` 中的 `value` 字段名                                   | string                                    | `value`    |
 | labelField            | 替代 `TreeOption` 中的 `label` 字段名                                   | string                                    | `label`    |
diff --git a/docs/.vitepress/components/selectTree/multiple.vue b/docs/.vitepress/components/selectTree/multiple.vue
index bca20cf8..ea464f5f 100644
--- a/docs/.vitepress/components/selectTree/multiple.vue
+++ b/docs/.vitepress/components/selectTree/multiple.vue
@@ -1,48 +1,47 @@
 <template>
-    <div class="text-tips">不折叠选中项（默认）：</div>
-    <FSelectTree :data="data" multiple clearable>
-    </FSelectTree>
-    <div class="text-tips">折叠选中项（默认1项起）：</div>
-    <FSelectTree :data="data" multiple clearable collapseTags>
-    </FSelectTree>
-    <div class="text-tips">折叠选中项（2项起）：</div>
-    <FSelectTree :data="data" multiple clearable collapseTags :collapseTagsLimit="2">
-    </FSelectTree>
+    勾选策略：
+    <FRadioGroup v-model="checkStrictly">
+        <FRadio value="all">all</FRadio>
+        <FRadio value="parent">parent</FRadio>
+        <FRadio value="child">child</FRadio>
+    </FRadioGroup>
+	<br/>
+    <FSelectTree :data="data" multiple cascade :checkStrictly="checkStrictly" clearable> </FSelectTree>
 </template>
 <script>
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
 
-function createData (level = 1, baseKey = '', prefix = null, suffix = null) {
-  if (!level) return undefined
-  return Array.apply(null, { length: 2 }).map((_, index) => {
-    const key = '' + baseKey + level + index
-    return {
-      label: createLabel(level),
-      value: key,
-      children: createData(level - 1, key, prefix, suffix),
-      prefix: prefix? () =>
-        h(PictureOutlined) : null,
-      suffix:suffix ? () =>
-        h(PlusCircleOutlined): null
-    }
-  })
+function createData(level = 1, baseKey = '', prefix = null, suffix = null) {
+    if (!level) return undefined;
+    return Array.apply(null, { length: 2 }).map((_, index) => {
+        const key = '' + baseKey + level + index;
+        return {
+            label: createLabel(level),
+            value: key,
+            children: createData(level - 1, key, prefix, suffix),
+            prefix: prefix ? () => h(PictureOutlined) : null,
+            suffix: suffix ? () => h(PlusCircleOutlined) : null,
+        };
+    });
 }
 
-function createLabel (level) {
-  if (level === 4) return '道生一'
-  if (level === 3) return '一生二'
-  if (level === 2) return '二生三'
-  if (level === 1) return '三生万物'
+function createLabel(level) {
+    if (level === 4) return '道生一';
+    if (level === 3) return '一生二';
+    if (level === 2) return '二生三';
+    if (level === 1) return '三生万物';
 }
 
 export default {
-    setup(){
+    setup() {
         const data = reactive(createData(4));
+		const checkStrictly = ref('all')
         return {
-            data
-        }
-    }
-}
+            data,
+			checkStrictly
+        };
+    },
+};
 </script>
 <style lang="less" scoped>
 .fes-select-tree {
diff --git a/docs/.vitepress/components/tree/checkable.vue b/docs/.vitepress/components/tree/checkable.vue
index 76be77cb..409223b1 100644
--- a/docs/.vitepress/components/tree/checkable.vue
+++ b/docs/.vitepress/components/tree/checkable.vue
@@ -1,39 +1,41 @@
 <template>
-    <FTree :data="data" checkable :selectable="false"></FTree>
+    父子关联: 
+	<FSwitch v-model="cascade"></FSwitch>
+    <FTree :data="data" checkable :cascade="cascade" :selectable="false"></FTree>
 </template>
 <script>
-import { reactive, h } from 'vue';
+import { reactive, h, ref } from 'vue';
 import { PictureOutlined, PlusCircleOutlined } from '@fesjs/fes-design/icon';
 
-function createData (level = 1, baseKey = '', prefix = null, suffix = null) {
-  if (!level) return undefined
-  return Array.apply(null, { length: 2 }).map((_, index) => {
-    const key = '' + baseKey + level + index
-    return {
-      label: createLabel(level),
-      value: key,
-      children: createData(level - 1, key, prefix, suffix),
-      prefix: prefix? () =>
-        h(PictureOutlined) : null,
-      suffix:suffix ? () =>
-        h(PlusCircleOutlined): null
-    }
-  })
+function createData(level = 1, baseKey = '', prefix = null, suffix = null) {
+    if (!level) return undefined;
+    return Array.apply(null, { length: 2 }).map((_, index) => {
+        const key = '' + baseKey + level + index;
+        return {
+            label: createLabel(level),
+            value: key,
+            children: createData(level - 1, key, prefix, suffix),
+            prefix: prefix ? () => h(PictureOutlined) : null,
+            suffix: suffix ? () => h(PlusCircleOutlined) : null,
+        };
+    });
 }
 
-function createLabel (level) {
-  if (level === 4) return '道生一'
-  if (level === 3) return '一生二'
-  if (level === 2) return '二生三'
-  if (level === 1) return '三生万物'
+function createLabel(level) {
+    if (level === 4) return '道生一';
+    if (level === 3) return '一生二';
+    if (level === 2) return '二生三';
+    if (level === 1) return '三生万物';
 }
 
 export default {
-    setup(){
+    setup() {
         const data = reactive(createData(4));
+		const cascade = ref(true);
         return {
-            data
-        }
-    }
-}
-</script>
\ No newline at end of file
+            data,
+			cascade
+        };
+    },
+};
+</script>
diff --git a/docs/.vitepress/components/tree/expandAll.vue b/docs/.vitepress/components/tree/expandAll.vue
deleted file mode 100644
index ac885b51..00000000
--- a/docs/.vitepress/components/tree/expandAll.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <FTree :data="data" defaultExpandAll></FTree>
-</template>
-<script>
-import { reactive, h } from 'vue';
-import { PictureOutlined, PlusCircleOutlined } from '@fesjs/fes-design/icon';
-
-function createData (level = 1, baseKey = '', prefix = null, suffix = null) {
-  if (!level) return undefined
-  return Array.apply(null, { length: 2 }).map((_, index) => {
-    const key = '' + baseKey + level + index
-    return {
-      label: createLabel(level),
-      value: key,
-      children: createData(level - 1, key, prefix, suffix),
-      prefix: prefix? () =>
-        h(PictureOutlined) : null,
-      suffix:suffix ? () =>
-        h(PlusCircleOutlined): null
-    }
-  })
-}
-
-function createLabel (level) {
-  if (level === 4) return '道生一'
-  if (level === 3) return '一生二'
-  if (level === 2) return '二生三'
-  if (level === 1) return '三生万物'
-}
-
-export default {
-    setup(){
-        const data = reactive(createData(4));
-        return {
-            data
-        }
-    }
-}
-</script>
\ No newline at end of file
diff --git a/docs/.vitepress/components/tree/index.md b/docs/.vitepress/components/tree/index.md
index aaa7f169..068ae69c 100644
--- a/docs/.vitepress/components/tree/index.md
+++ b/docs/.vitepress/components/tree/index.md
@@ -18,33 +18,25 @@ app.use(FTree);
 
 --COMMON
 
-#### inline
-
-底层节点在一行展示
+#### 叶子节点一行展示
 
 --INLINE
 
-#### 多选节点
+#### 可选择多个节点
 
 可以选择多个节点。
 
 --MULTIPLE
 
-#### 展开全部
-
-默认展开全部节点
-
---EXPANDALL
-
-### 可选择
+### 可勾选
 
 适用于需要选择层级时使用。
 
 --CHECKABLE
 
-#### 展开部分 + 默认选中 + 默认 check
+#### 展开部分 + 默认选中 + 默认勾选
 
-通过`expandedKeys`配置默认展开部分节点，通过`selectedKeys`配置默认 select 的节点，通过`checkedKeys`配置默认 check 的节点。
+通过`expandedKeys`配置默认展开节点，通过`selectedKeys`配置默认选择节点，通过`checkedKeys`配置默认勾选节点。
 
 --DEFAULT
 
@@ -84,7 +76,8 @@ app.use(FTree);
 | defaultExpandAll      | 是否默认展开所有节点，当有 `expandedKeys` 时，`defaultExpandAll` 将失效 | boolean                                   | `false`    |
 | expandedKeys(v-model) | 展开的节点的 key 的数组                                                 | Array<string \| number>                   | `[]`       |
 | checkable             | 节点前添加 `Checkbox` 复选框                                            | boolean                                   | `false`    |
-| checkStrictly         | `checkable` 状态下节点选择完全受控（父子节点选中状态不再关联）          | boolean                                   | `false`    |
+| cascade             | `checkable` 状态下节点选择完全受控（父子节点选中状态关联）                                           | boolean                                   | `false`    |
+| checkStrictly         | 设置勾选策略来指定勾选回调返回的值，`all` 表示回调函数值为全部选中节点；`parent` 表示回调函数值为父节点（当父节点下所有子节点都选中时）；`child` 表示回调函数值为子节点          | string                                   | `all`    |
 | checkedKeys(v-model)  | 勾选的节点的 key 的数组                                                 | Array<string \| number>                   | `[]`       |
 | selectable            | 是否可选中节点                                                              | boolean                                   | `true`     |
 | selectedKeys(v-model) | 设置选中的树节点                                                        | Array<string \| number>                   | `[]`       |
@@ -94,7 +87,7 @@ app.use(FTree);
 | remote                | 是否异步获取选项，和 `onLoad` 配合                                      | boolean                                   | `false`    |
 | loadData              | 异步加载数据的回调函数                                                  | (node: TreeOption) => Promise\<void\>     | `null`     |
 | inline                | 底层节点是否横向排列                                                    | boolean                                   | `false`    |
-| filterMethod          | 按需筛选树节点（高亮），返回 true                                       | (filterText, node: TreeOption) => Boolean | `null`     |
+| filterMethod          | 类似Array.filter函数，筛选树节点（高亮）                                      | (filterText, node: TreeOption) => Boolean | `null`     |
 
 ## Tree Events
 
diff --git a/docs/.vitepress/components/tree/inline.vue b/docs/.vitepress/components/tree/inline.vue
index a10c612b..d054620f 100644
--- a/docs/.vitepress/components/tree/inline.vue
+++ b/docs/.vitepress/components/tree/inline.vue
@@ -1,5 +1,5 @@
 <template>
-    <FTree :data="data" inline></FTree>
+    <FTree :data="data" inline defaultExpandAll></FTree>
 </template>
 <script>
 import { reactive, h } from 'vue';