diff --git a/devui/tree/src/composables/use-checked.ts b/devui/tree/src/composables/use-checked.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b22d9927887fa34430543a0a3d3b41e831829b6d
--- /dev/null
+++ b/devui/tree/src/composables/use-checked.ts
@@ -0,0 +1,144 @@
+import type { SetupContext, Ref } from 'vue'
+import { unref, ref } from 'vue'
+import {
+  TreeItem,
+  SelectType,
+  ReverseTree,
+  CheckableRelationType,
+} from '../tree-types'
+import { flatten } from '../util'
+
+export default function useChecked(
+  cbr: Ref<CheckableRelationType>,
+  ctx: SetupContext,
+  data: any[]
+) {
+  const selected = ref<SelectType>({})
+  const flatData = flatten(data)
+
+  const findPedigreeById = (id: string) => {
+    const treeData = data
+    let parentLevel: ReverseTree = {}
+    let childLevel: string[] = []
+    let target = undefined
+    const ergodic = (curr: any[], parentNode: ReverseTree) => {
+      curr.every(({ children, id: itemId }) => {
+        if (target) {
+          return false
+        }
+        if (itemId === id) {
+          parentLevel = parentNode
+          childLevel = Array.isArray(children)
+            ? flatten(children).map(({ id: key }) => key)
+            : []
+          target = itemId
+          return false
+        }
+        if (Array.isArray(children)) {
+          ergodic(children, {
+            id: itemId,
+            children: children.map(({ id: key }) => key),
+            parent: parentNode,
+          })
+        }
+        return true
+      })
+    }
+    ergodic(treeData, {})
+    return {
+      parentLevel,
+      childLevel,
+    }
+  }
+
+  const generateParentObject = (
+    parentLevel: ReverseTree,
+    isSelected: boolean,
+    checkId: string
+  ): SelectType => {
+    const state: SelectType = {}
+    const currentSelected = unref(selected)
+    const ergodic = (currObj: ReverseTree, isOverflow = false) => {
+      const { id, children, parent } = currObj
+      if (!parent) {
+        return
+      }
+      if (isSelected) {
+        const optional = children.filter(
+          (item) => !currentSelected[item] || currentSelected[item] === 'none'
+        )
+        if (optional.length <= 1) {
+          if (optional[0] === checkId) {
+            state[id] = 'select'
+          } else if (isOverflow) {
+            state[id] = 'half'
+          }
+        } else {
+          state[id] = 'half'
+        }
+        ergodic(parent, state[id] === 'select')
+      } else {
+        const optional = children.filter(
+          (item) => currentSelected[item] && currentSelected[item] !== 'none'
+        )
+        if (optional.length <= 1) {
+          if (optional[0] === checkId || isOverflow) {
+            state[id] = 'none'
+          }
+        } else {
+          state[id] = 'half'
+        }
+        ergodic(parent, state[id] === 'none')
+      }
+    }
+    ergodic(parentLevel)
+    return state
+  }
+
+  const onNodeClick = (item: TreeItem) => {
+    const { id } = item
+    let currentSelected = Object.assign({}, unref(selected))
+    const isSelected = currentSelected[id] === 'none' || !currentSelected[id]
+    if (cbr.value === 'none') {
+      currentSelected = Object.assign(currentSelected, {
+        [id]: isSelected ? 'select' : 'none',
+      })
+    } else if (cbr.value === 'both') {
+      const { parentLevel, childLevel } = findPedigreeById(id)
+      currentSelected = Object.assign(
+        currentSelected,
+        Object.fromEntries(
+          childLevel.map((key) => [key, isSelected ? 'select' : 'none'])
+        ),
+        generateParentObject(parentLevel, isSelected, id),
+        { [id]: isSelected ? 'select' : 'none' }
+      )
+    } else if (cbr.value === 'upward') {
+      const { parentLevel } = findPedigreeById(id)
+      currentSelected = Object.assign(
+        currentSelected,
+        generateParentObject(parentLevel, isSelected, id),
+        { [id]: isSelected ? 'select' : 'none' }
+      )
+    } else if (cbr.value === 'downward') {
+      const { childLevel } = findPedigreeById(id)
+      currentSelected = Object.assign(
+        currentSelected,
+        Object.fromEntries(
+          childLevel.map((key) => [key, isSelected ? 'select' : 'none'])
+        ),
+        { [id]: isSelected ? 'select' : 'none' }
+      )
+    }
+    selected.value = currentSelected
+    const currentSelectedItem = flatData.filter(
+      ({ id }) => currentSelected[id] && currentSelected[id] !== 'none'
+    )
+    ctx.emit('nodeSelected', currentSelectedItem)
+  }
+
+  return {
+    selected,
+    onNodeClick,
+  }
+}
diff --git a/devui/tree/src/composables/use-merge-node.ts b/devui/tree/src/composables/use-merge-node.ts
index b5c8db7d460823f1bdbc4cd34e46395912f86527..705cf07809a726a03854203c13b513b818d2d6b2 100644
--- a/devui/tree/src/composables/use-merge-node.ts
+++ b/devui/tree/src/composables/use-merge-node.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue';
+import { ref } from 'vue'
 
 export default function useMergeNode(data: Array<any>): any {
 
@@ -7,8 +7,8 @@ export default function useMergeNode(data: Array<any>): any {
     treeItem,
     childName = 'children',
     labelName = 'label'
-  ): any => {
-    const { [childName]: children, [labelName]: label } = treeItem;
+  ) => {
+    const { [childName]: children, [labelName]: label } = treeItem
     if (
       Array.isArray(children) &&
       children.length === 1 &&
@@ -19,10 +19,10 @@ export default function useMergeNode(data: Array<any>): any {
         Object.assign({}, children[0], {
           [labelName]: `${label} \\ ${children[0][labelName]}`,
         })
-      );
+      )
     }
-    return treeItem;
-  };
+    return treeItem
+  }
 
   const mergeNode = (
     tree: Array<any>,
@@ -31,24 +31,24 @@ export default function useMergeNode(data: Array<any>): any {
     labelName = 'label'
   ): Array<any> => {
     return tree.map((item) => {
-      const { [childName]: children } = item;
+      const { [childName]: children } = item
       if (!Array.isArray(children) || !children.length) {
-        return Object.assign({}, item, { level: level + 1 });
+        return Object.assign({}, item, { level: level + 1 })
       }
-      let currentObject = item;
+      let currentObject = item
       if (children.length === 1) {
-        currentObject = mergeObject(item);
+        currentObject = mergeObject(item)
       }
       return Object.assign({}, currentObject, {
         [childName]: mergeNode(currentObject[childName], level + 1, childName, labelName),
         level: level + 1,
-      });
-    });
-  };
+      })
+    })
+  }
 
-  const mergeData = ref(mergeNode(data));
+  const mergeData = ref(mergeNode(data))
 
   return {
     mergeData,
-  };
+  }
 }
diff --git a/devui/tree/src/config.ts b/devui/tree/src/config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dbd834d3d802d9abfe6d304c07e3688df292c8f5
--- /dev/null
+++ b/devui/tree/src/config.ts
@@ -0,0 +1,9 @@
+export const CHECK_CONFIG = {
+  none: {},
+  half: {
+    halfchecked: true
+  },
+  select: {
+    checked: true,
+  },
+}
diff --git a/devui/tree/src/tree-node-content.tsx b/devui/tree/src/tree-node-content.tsx
index f6a3b2eabb9adcd97006acd0685e2d12e246d6fa..3882736d4259f4328157874df81948bab3309f92 100644
--- a/devui/tree/src/tree-node-content.tsx
+++ b/devui/tree/src/tree-node-content.tsx
@@ -1,5 +1,5 @@
-import { defineComponent, h, inject } from 'vue';
-import { TreeRootType } from './tree-types';
+import { defineComponent, h, inject } from 'vue'
+import { TreeRootType } from './tree-types'
 
 export default defineComponent({
   name: 'DTreeNodeContent',
@@ -10,13 +10,13 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const tree = inject<TreeRootType>('treeRoot');
+    const tree = inject<TreeRootType>('treeRoot')
     return () => {
-      const node = props.node;
-      const { disabled, label } = node;
+      const node = props.node
+      const { disabled, label } = node
       return tree.ctx.slots.default
         ? tree.ctx.slots.default({ node })
-        : <span class={['devui-tree-node__title', disabled && 'select-disabled']}>{ label }</span>;
-    };
+        : <span class={['devui-tree-node__title', disabled && 'select-disabled']}>{ label }</span>
+    }
   },
-});
+})
diff --git a/devui/tree/src/tree-types.ts b/devui/tree/src/tree-types.ts
index cec8a0d9cd733d54b90f5ac744fc12f3428020dd..03c9940125596cc1e483e802e7a4a219f3c76c31 100644
--- a/devui/tree/src/tree-types.ts
+++ b/devui/tree/src/tree-types.ts
@@ -9,14 +9,33 @@ export interface TreeItem {
   children?: TreeData
   [key: string]: any
 }
+export interface SelectType {
+  [key: string]: 'none' | 'half' | 'select'
+}
+
+export interface ReverseTree {
+  id?: string
+  children?: string[]
+  parent?: ReverseTree 
+}
 
 export type TreeData = Array<TreeItem>
 
+export type CheckableRelationType = 'downward' | 'upward' | 'both' | 'none'
+
 export const treeProps = {
   data: {
     type: Array as PropType<TreeData>,
     required: true,
     default: () => [],
+  },
+  checkable: {
+    type: Boolean,
+    default: false
+  },
+  checkableRelation: {
+    type: String as () => CheckableRelationType,
+    default: 'none',
   }
 } as const
 
diff --git a/devui/tree/src/tree.tsx b/devui/tree/src/tree.tsx
index 0ea203d101e6bf4ea1229810de8675bd484f28d3..f9b45da9ea20e9deb5026317eeb991a2320e0e6e 100644
--- a/devui/tree/src/tree.tsx
+++ b/devui/tree/src/tree.tsx
@@ -1,10 +1,14 @@
 import { defineComponent, toRefs, provide } from 'vue'
+import type { SetupContext } from 'vue'
 import { treeProps, TreeProps, TreeItem, TreeRootType } from './tree-types'
-import { flatten, precheckTree } from './util'
+import { CHECK_CONFIG } from  './config'
+import { precheckTree } from './util'
 import Loading from '../../loading/src/service'
+import Checkbox from '../../checkbox/src/checkbox'
 import useToggle from './composables/use-toggle'
 import useMergeNode from './composables/use-merge-node'
 import useHighlightNode from './composables/use-highlight'
+import useChecked from './composables/use-checked'
 import useLazy from './composables/use-lazy'
 import IconOpen from './assets/open.svg'
 import IconClose from './assets/close.svg'
@@ -14,20 +18,20 @@ import './tree.scss'
 export default defineComponent({
   name: 'DTree',
   props: treeProps,
-  emits: [],
-  setup(props: TreeProps, ctx) {
-    const { data } = toRefs({ ...props, data: precheckTree(props.data) })
-    const flatData = flatten(data.value)
-
+  emits: ['nodeSelected'],
+  setup(props: TreeProps, ctx: SetupContext) {
+    const { data, checkable, checkableRelation: cbr } = toRefs({ ...props, data: precheckTree(props.data) })
     const { mergeData } = useMergeNode(data.value)
     const { openedData, toggle } = useToggle(mergeData.value)
     const { nodeClassNameReflect, handleInitNodeClassNameReflect, handleClickOnNode } = useHighlightNode()
     const { lazyNodesReflect, handleInitLazyNodeReflect, getLazyData } = useLazy()
+    const { selected, onNodeClick } = useChecked(cbr, ctx, data.value)
 
-    provide<TreeRootType>('treeRoot', { ctx, props });
+    provide<TreeRootType>('treeRoot', { ctx, props })
     const Indent = () => {
-      return <span style="display: inline-block; width: 16px; height: 16px;"></span>
+      return <span style="display: inline-block; width: 16px; height: 16px; margin-left: 8px;"></span>
     }
+    
     const renderNode = (item: TreeItem) => {
       const { id = '', label, disabled, open, isParent, level, children } = item
       handleInitNodeClassNameReflect(disabled, id)
@@ -74,6 +78,7 @@ export default defineComponent({
           : <Indent />
         )
       }
+      const checkState = CHECK_CONFIG[selected.value[id] ?? 'none']
       return (
         <div
           class={['devui-tree-node', open && 'devui-tree-node__open']}
@@ -85,6 +90,7 @@ export default defineComponent({
           >
             <div class="devui-tree-node__content--value-wrapper">
               {renderNodeWithIcon(item)}
+              {checkable.value && <Checkbox key={id} onClick={() => onNodeClick(item)} disabled={disabled} {...checkState} />}
               <NodeContent node={item}/>
               {item.isParent && <div class='devui-tree-node_loading' id={lazyNodesReflect.value[id].loadingTargetId} />}
             </div>
diff --git a/docs/components/tree/index.md b/docs/components/tree/index.md
index 3599119ae00ee1781136cbfd32d7c273ac55ba07..3251f14788864f4fdd0d6b834c757e800c390137 100644
--- a/docs/components/tree/index.md
+++ b/docs/components/tree/index.md
@@ -304,6 +304,7 @@ export default defineComponent({
     </div>
     <d-tree :data="data">
       <template #default="{ node }">
+        <span class="my-icon-next"></span>
         <span :class="[node?.data?.type && 'my-icon', node?.data?.type]" ></span>
         <span class="op-title">{{ node.label }}</span>
         <span class="op-status"></span>
@@ -455,6 +456,9 @@ export default defineComponent({
   background-color: #aaaaaa;
   border: 1px #999999 solid;
 }
+.my-icon-next {
+  margin-left: 8px;
+}
 
 .op-title {
   display: flex;
@@ -506,3 +510,232 @@ export default defineComponent({
 </style>
 ```
 :::
+
+### 可勾选树
+
+:::demo 可以进行勾选的树。
+
+```vue
+<template>
+  <d-tree :data="data" :checkable="true" ></d-tree>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const data = ref([
+      {
+        label: "parent node 1",
+      },
+      {
+        label: "parent node 2",
+        open: true,
+        children: [
+          {
+            label: "leaf node 2-1",
+            children: [
+              {
+                label: "leaf node 2-1-1",
+              },
+              {
+                label: "leaf node 2-1-2",
+              },
+            ],
+          },
+          {
+            label: "leaf node 2-2",
+            open: true,
+            children: [
+              {
+                label: "leaf node 2-2-1",
+                disabled: true,
+                isChecked: true,
+              },
+              {
+                label: "leaf node 2-2-2",
+                disableSelect: true,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "parent node 3",
+        disableToggle: true,
+        children: [
+          {
+            label: "leaf node 3-1",
+          },
+          {
+            label: "leaf node 3-2",
+          },
+        ],
+      },
+      {
+        label: "parent node 4",
+        children: [
+          {
+            label: "leaf node 4-1",
+          },
+          {
+            label: "leaf node 4-2",
+          },
+        ],
+      },
+      {
+        label: "parent node 5",
+        children: [
+          {
+            label: "leaf node 5-1",
+          },
+          {
+            label: "leaf node 5-2",
+          },
+        ],
+      },
+    ]);
+    
+    return {
+      data,
+    }
+  }
+})
+</script>
+```
+:::
+
+### 控制父子check关系
+
+:::demo 通过 checkableRelation 控制check时父子节点的表现。
+
+```vue
+<template>
+  <h6><p>checkableRelation = "both"</p></h6>
+  <d-tree :data="data" :checkable="true" checkableRelation="both" ></d-tree>
+  <h6><p>checkableRelation = "upward"</p></h6>
+  <d-tree :data="data" :checkable="true" checkableRelation="upward" ></d-tree>
+  <h6><p>checkableRelation = "downward"</p></h6>
+  <d-tree :data="data" :checkable="true" checkableRelation="downward" ></d-tree>
+  <h6><p>checkableRelation = "none"</p></h6>
+  <d-tree :data="data" :checkable="true" checkableRelation="none" ></d-tree>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const data = ref([
+      {
+        label: 'parent node 1 - expanded',
+        open: true,
+        children: [
+          {
+            label: 'parent node 11 - folded',
+            children: [
+              {
+                label: 'leaf node 111',
+              },
+              {
+                label: 'leaf node 112',
+              },
+              {
+                label: 'leaf node 113',
+              },
+              {
+                label: 'leaf node 114',
+              },
+            ],
+          },
+          {
+            label: 'parent node 12 - folded',
+            children: [
+              {
+                label: 'leaf node 121',
+              },
+              {
+                label: 'leaf node 122',
+              },
+              {
+                label: 'leaf node 123',
+              },
+              {
+                label: 'leaf node 124',
+              },
+            ],
+          },
+          {
+            label: 'parent node 13 - without children',
+            isparent: true,
+          },
+        ],
+      },
+      {
+        label: 'parent node 2 - folded',
+        children: [
+          {
+            label: 'parent node 21 - expanded',
+            open: true,
+            children: [
+              {
+                label: 'leaf node 211',
+              },
+              {
+                label: 'leaf node 212',
+              },
+              {
+                label: 'leaf node 213',
+              },
+              {
+                label: 'leaf node 214',
+              },
+            ],
+          },
+          {
+            label: 'parent node 22 - folded',
+            children: [
+              {
+                label: 'leaf node 221',
+              },
+              {
+                label: 'leaf node 222',
+              },
+              {
+                label: 'leaf node 223',
+              },
+              {
+                label: 'leaf node 224',
+              },
+            ],
+          },
+          {
+            label: 'parent node 23 - folded',
+            children: [
+              {
+                label: 'leaf node 231',
+              },
+              {
+                label: 'leaf node 232',
+              },
+              {
+                label: 'leaf node 233',
+              },
+              {
+                label: 'leaf node 234',
+              },
+            ],
+          },
+        ],
+      },
+    ]);
+    
+    return {
+      data,
+    }
+  }
+})
+</script>
+```
+:::
\ No newline at end of file