diff --git a/packages/devui-vue/devui/tree/src/core/use-merge-nodes.ts b/packages/devui-vue/devui/tree/src/core/use-merge-nodes.ts new file mode 100644 index 0000000000..c0e8841183 --- /dev/null +++ b/packages/devui-vue/devui/tree/src/core/use-merge-nodes.ts @@ -0,0 +1,41 @@ +import { Ref } from 'vue'; +import useOperate from './use-operate'; +import { IInnerTreeNode, IUseCore } from './use-tree-types'; + +export default function() { + return function useMergeNodes(data: Ref, core: IUseCore) { + const { setNodeValue, getChildren } = core; + const { removeNode } = useOperate()(data, core); + + const mergeTreeNodes = () => { + const mergeToNode = (node: IInnerTreeNode) => { + if (node.isLeaf) return; + + const children = getChildren(node, { recursive: false }); + if (children?.length === 1) { + const subChildren = getChildren(children[0], { recursive: false }); + + if (subChildren.length !== 0) { + setNodeValue(node, 'label', node.label + ' / ' + children[0]?.label); + removeNode(children[0], { recursive: false }); + mergeToNode(node); + } else { + setNodeValue(children[0], 'parentId', node.id); + } + } else { + children.forEach(item => { + mergeToNode(item); + }); + } + }; + + data.value.filter(item => item.level === 1).forEach(item => { + mergeToNode(item); + }); + } + + return { + mergeTreeNodes, + } + }; +} diff --git a/packages/devui-vue/devui/tree/src/core/use-operate.ts b/packages/devui-vue/devui/tree/src/core/use-operate.ts index daf4388edb..36bfa24547 100644 --- a/packages/devui-vue/devui/tree/src/core/use-operate.ts +++ b/packages/devui-vue/devui/tree/src/core/use-operate.ts @@ -38,9 +38,19 @@ export default function(options?) { ); } - const removeNode = (node: ITreeNode): void => { + const removeNode = (node: IInnerTreeNode, config = { recursive: true }): void => { + if (!config.recursive) { + getChildren(node).forEach(child => { + setNodeValue(child, 'level', getLevel(child) - 1); + }); + } + data.value = data.value.filter(item => { - return item.id !== node.id && !getChildren(node).map(nodeItem => nodeItem.id).includes(item.id); + if (config.recursive) { + return item.id !== node.id && !getChildren(node).map(nodeItem => nodeItem.id).includes(item.id); + } else { + return item.id !== node.id; + } }); } diff --git a/packages/devui-vue/devui/tree/src/new-tree.tsx b/packages/devui-vue/devui/tree/src/new-tree.tsx index 6fa13305a8..ed82e9271b 100644 --- a/packages/devui-vue/devui/tree/src/new-tree.tsx +++ b/packages/devui-vue/devui/tree/src/new-tree.tsx @@ -5,20 +5,22 @@ import DTreeNodeToggle from './components/tree-node-toggle'; import useTree from './core/use-tree'; import useCheck from './core/use-check'; import useSelect from './core/use-select'; -import { USE_TREE_TOKEN } from './const'; import useOperate from './core/use-operate'; +import useMergeNodes from './core/use-merge-nodes'; +import { USE_TREE_TOKEN } from './const'; import { TreeProps, treeProps } from './new-tree-types'; import './tree.scss'; export default defineComponent({ name: 'DNewTree', props: treeProps, - setup(props: TreeProps, { slots }) { + setup(props: TreeProps, { slots, expose }) { const { data, check } = toRefs(props); const userPlugins = [ useSelect(), useOperate(), + useMergeNodes(), ]; const checkOptions = ref({ @@ -49,6 +51,10 @@ export default defineComponent({ provide(USE_TREE_TOKEN, treeFactory); + expose({ + treeFactory + }); + return () => { return (
diff --git a/packages/devui-vue/docs/components/tree/index.md b/packages/devui-vue/docs/components/tree/index.md index f76032f766..4ef8a77248 100644 --- a/packages/devui-vue/docs/components/tree/index.md +++ b/packages/devui-vue/docs/components/tree/index.md @@ -278,6 +278,93 @@ export default defineComponent({ ::: +### 节点合并 + +:::demo + +```vue + + +``` + +::: + ### Tree 参数 | 参数名 | 类型 | 默认值 | 说明 | 跳转 Demo |