feat: Tree组件选项支持配置是否可拖拽

components/tree/interface.ts

@@ -9,6 +9,7 @@ export interface TreeOption {
     disabled?: boolean;
     selectable?: boolean;
     checkable?: boolean;
+    draggable?: boolean;
     isLeaf?: boolean;
     prefix?: string | (() => VNodeChild);
     suffix?: string | (() => VNodeChild);

components/tree/props.ts

@@ -1,6 +1,6 @@
-import type { ExtractPropTypes, PropType, InjectionKey, Ref } from 'vue';
-import { CHECK_STRATEGY } from './const';
 import { extractPropsDefaultValue } from '../_util/utils';
+import { CHECK_STRATEGY } from './const';
+import type { ExtractPropTypes, PropType, InjectionKey, Ref } from 'vue';
 
 import type {
     TreeOption,

components/tree/useData.ts

@@ -1,8 +1,8 @@
 import { ref, watch } from 'vue';
-import { isNil } from 'lodash-es';
+import { isNil, isUndefined } from 'lodash-es';
+import { concat } from '../_util/utils';
 import type { InnerTreeOption, TreeNodeKey } from './interface';
 import type { TreeProps } from './props';
-import { concat } from '../_util/utils';
 
 let uid = 1;
 const getUid = () => {
@@ -51,6 +51,7 @@ export default ({ props, emit }: { props: TreeProps; emit: any }) => {
             disabled: item.disabled,
             selectable: item.selectable,
             checkable: item.checkable,
+            draggable: isUndefined(item.draggable) ? true : item.draggable,
             value,
             label,
             isLeaf,

components/tree/useDrag.ts

@@ -1,6 +1,6 @@
 import { onUnmounted, ref } from 'vue';
-import type { InnerTreeOption, TreeNodeKey, DropPosition } from './interface';
 import getPrefixCls from '../_util/getPrefixCls';
+import type { InnerTreeOption, TreeNodeKey, DropPosition } from './interface';
 
 const prefixCls = getPrefixCls('tree-node');
 
@@ -35,13 +35,22 @@ export default ({
 
     const handleDragstart = (value: TreeNodeKey, event: DragEvent) => {
         const node = nodeList.get(value);
+        if (!node.draggable) {
+            // 阻止默认事件，默认事件会有拖拽效果
+            event.preventDefault();
+            return;
+        }
         dragNode = node;
         emit('dragstart', { node, event });
     };
 
     const handleDragend = (value: TreeNodeKey, event: DragEvent) => {
         resetDragState();
         const node = nodeList.get(value);
+        if (!node.draggable) {
+            event.preventDefault();
+            return;
+        }
         emit('dragend', { node, event });
     };
 

components/tree/useFilter.ts

@@ -1,6 +1,5 @@
 import { ref, Ref } from 'vue';
 import { isFunction } from 'lodash-es';
-
 import type { TreeNodeKey, InnerTreeOption } from './interface';
 import type { TreeProps } from './props';
 

components/tree/useSelect.ts

@@ -25,12 +25,16 @@ export default ({
         const index = values.indexOf(val);
         if (props.multiple) {
             if (index !== -1) {
-                props.cancelable && values.splice(index, 1);
+                if (props.cancelable) {
+                    values.splice(index, 1);
+                }
             } else {
                 values.push(val);
             }
         } else if (index !== -1) {
-            props.cancelable && values.splice(index, 1);
+            if (props.cancelable) {
+                values.splice(index, 1);
+            }
         } else {
             values[0] = val;
         }

docs/.vitepress/components/tree/index.md

@@ -63,6 +63,7 @@ app.use(FTree);
 通过关键字过滤树节点。
 
 --FILTER 
+
 ### 前缀与后缀
 
 放一些操作。
@@ -138,6 +139,7 @@ app.use(FTree);
 | disabled?         | 是否禁用节点                                           | boolean                     | `-` |
 | selectable? | 是否禁用选中节点，默认为`Tree`组件的`selectable`                          | boolean                     | `-` |
 | checkable? | 是否禁用勾选节点，默认为`Tree`组件的`checkable`                          | boolean                     | `-` |
+| draggable? | 节点是否能被拖拽，默认为true                       | boolean                     | `true` |
 | isLeaf?           | 节点是否是叶节点，在 remote 模式下是必须的             | boolean                     | `false` |
 | prefix?           | 节点的前缀                                             | string / (() => VNodeChild) | `null`  |
 | suffix?           | 节点的后缀                                             | string / (() => VNodeChild) | `null`  |