feat(tree): 增加checkStrategy支持自定义勾选策略

packages/devui-vue/devui/tree/src/components/tree-node.tsx

@@ -33,7 +33,12 @@ export default defineComponent({
     const halfChecked = computed(() => {
       const children = getChildren(data.value);
       const checkedChildren = children.filter((item: IInnerTreeNode) => item.checked);
-      return checkedChildren.length > 0 && checkedChildren.length < children.length;
+
+      if (['upward', 'both'].includes(check.value)) {
+        return checkedChildren.length > 0 && checkedChildren.length < children.length;
+      } else {
+        return false;
+      }
     });
 
     return () => {

packages/devui-vue/devui/tree/src/core/use-check.ts

@@ -1,9 +1,11 @@
-import { Ref } from 'vue';
+import { ref, Ref } from 'vue';
 import { CheckStrategy, IInnerTreeNode, IUseCore } from './use-tree-types';
 
-export default function(options?: {
+export default function(options?: Ref<{
   checkStrategy: CheckStrategy
-}) {
+}> = ref({
+  checkStrategy: 'both'
+})) {
   return function useCheck(data: Ref<IInnerTreeNode[]>, core: IUseCore) {
     const { setNodeValue, getNode, getChildren, getParent } = core;
 
@@ -45,13 +47,21 @@ export default function(options?: {
     const toggleCheckNode = (node: IInnerTreeNode): void => {
       if (getNode(node).checked) {
         setNodeValue(node, 'checked', false);
-        getChildren(node).forEach(item => setNodeValue(item, 'checked', false));
+
+        if (['downward', 'both'].includes(options.value.checkStrategy)) {
+          getChildren(node).forEach(item => setNodeValue(item, 'checked', false));
+        }
       } else {
         setNodeValue(node, 'checked', true);
-        getChildren(node).forEach(item => setNodeValue(item, 'checked', true));
+
+        if (['downward', 'both'].includes(options.value.checkStrategy)) {
+          getChildren(node).forEach(item => setNodeValue(item, 'checked', true));
+        }
       }
 
-      controlParentNodeChecked(node);
+      if (['upward', 'both'].includes(options.value.checkStrategy)) {
+        controlParentNodeChecked(node);
+      }
     }
 
     return {

packages/devui-vue/devui/tree/src/core/use-core.ts

@@ -1,5 +1,5 @@
 import { computed, ComputedRef, Ref } from 'vue';
-import { IInnerTreeNode, IUseCore, valueof } from './use-tree-types';
+import { IInnerTreeNode, ITreeNode, IUseCore, valueof } from './use-tree-types';
 import { generateInnerTree } from './utils';
 
 export default function(options?){
@@ -66,7 +66,7 @@ export default function(options?){
       data.value[getIndex(node)][key] = value;
     }
 
-    const setTree = (newTree: IInnerTreeNode[]): void => {
+    const setTree = (newTree: ITreeNode[]): void => {
       data.value = generateInnerTree(newTree);
     }
 

packages/devui-vue/devui/tree/src/new-tree.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, provide, renderSlot, toRefs, useSlots, watch } from 'vue';
+import { defineComponent, provide, ref, renderSlot, toRefs, useSlots, watch } from 'vue';
 import DTreeNode from './components/tree-node';
 import DTreeNodeContent from './components/tree-node-content';
 import DTreeNodeToggle from './components/tree-node-toggle';
@@ -21,8 +21,16 @@ export default defineComponent({
       useOperate(),
     ];
 
-    if (check) {
-      userPlugins.push(useCheck());
+    const checkOptions = ref({
+      checkStrategy: check.value || 'both'
+    });
+
+    watch(check, (newVal) => {
+      checkOptions.value.checkStrategy = newVal;
+    })
+
+    if (check.value) {
+      userPlugins.push(useCheck(checkOptions));
     }
 
     const treeFactory = useTree(

packages/devui-vue/docs/components/tree/index.md

@@ -51,14 +51,24 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-new-tree :data="data" check></d-new-tree>
+  <div class="flex flex-row" style="height: 28px;">
+    <label class="flex items-center mr-xl"><span class="inline-block mr-xs">开启勾选</span><d-switch v-model:checked="openCheck"></d-switch></label>
+    <d-radio-group v-if="openCheck" v-model="currentStrategy" direction="row">
+      <d-radio v-for="strategy of checkStrategy" :key="strategy" :value="strategy">{{ strategy }}</d-radio>
+    </d-radio-group>
+  </div>
+  <d-new-tree :data="data" :check="currentStrategy"></d-new-tree>
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue'
+import { defineComponent, ref, watch } from 'vue'
 
 export default defineComponent({
   setup() {
+    const openCheck = ref(true);
+    const checkStrategy = ref(['both', 'downward', 'upward', 'none']);
+    const currentStrategy = ref('both');
+
     const data = ref([
       {
         label: 'Parent node 1',
@@ -75,9 +85,37 @@ export default defineComponent({
       },
       { label: 'Leaf node 2' }
     ]);
+
+    watch(openCheck, (newVal) => {
+      if (newVal === false) {
+        currentStrategy.value = false;
+      } else {
+        currentStrategy.value = 'both';
+
+        data.value = [
+          {
+            label: 'Parent node 1',
+            children: [
+              {
+                label: 'Parent node 1-1',
+                children: [
+                  { label: 'Leaf node 1-1-1' },
+                  { label: 'Leaf node 1-1-2' }
+                ]
+              },
+              { label: 'Leaf node 1-2' }
+            ]
+          },
+          { label: 'Leaf node 2' }
+        ];
+      }
+    });
 
     return {
-      data
+      data,
+      openCheck,
+      checkStrategy,
+      currentStrategy,
     }
   }
 })