vue-willtable

--- sidebarDepth: 2 --- # 属性 ## 画布属性 ### startNodeId - 类型：`string` - 默认值：'00' 开始节点 ID ### disabled - 类型：`boolean` - 默认值：`false` 禁止编辑，菜单无法拖拽、无法触发节点新增、点击事件 ### joinable - 类型：`boolean` - 默认值：`false` 是否支持节点合并 ### hiddenMenu - 类型：`boolean` - 默认值：`false` 隐藏菜单，可用于编辑和查看状态，或者是自定义菜单 ### NodeMenuList - 类型：`NodeMenuItem[]` - 默认值：`[]` 节点菜单列表 ### disableAdd - 类型：`(metadata: StrategyMetadata, newNode: NodeMenuItem, target: { preNode: NodeDefine; nextNode: NodeDefine | null; curEdge: Edge | null; } ) => boolean | (() => void)` - 默认值：undefined 自定义禁止添加校验规则 ### maxHistory - 类型：`number` - 默认值：10 作用于撤销与重做操作，最大历史记录条数 ### showMap - 类型：`boolean` - 默认值：false 展示小地图 ### mapWidth - 类型：`number` - 默认值：200 小地图宽度 ### mapHeight - 类型：`number` - 默认值：150 小地图高度 ### showToolbar - 类型：`boolean` - 默认值：false 展示工具栏 ### maxScale - 类型：`number` - 默认值：5 最大放大倍数 ### minScale - 类型：`number` - 默认值：0.2 最小缩小倍数 ## 节点属性 ### nodeWidth - 类型：`number` - 默认值：`176` 节点块所占宽度 ### nodeInnerWidth - 类型：`number` - 默认值：`56` 显示节点所占宽度，用于计算边连线位置 ### nodeInnerHeight - 类型：`number` - 默认值：`56` 显示节点所占高度，用于计算边连线位置 ### nodeClick - 类型：`(node: NodeDefine) => void` - 默认值：undefined 节点点击回调事件 ### nodeAdd - 类型：`(node: Node) => void` - 默认值：undefined 节点新增回调事件 ### customNode - 类型：`(node: NodeDefine) => React.ReactNode` - 默认值：undefined 自定义渲染节点 ### customEmpty - 类型：`(node: NodeDefine) => boolean` - 默认值：undefined 自定义空节点 ## 边属性 ### edgeColor - 类型：`string` - 默认值：#DEE0E2 边颜色 ### edgeWidth - 类型：`number` - 默认值：1 边宽度 ### customEdgeName - 类型：`(edge: Edge) => React.ReactNode` - 默认值：undefined 自定义渲染边名称 ### customEdgeArrow - 类型：`() => React.ReactNode` - 默认值：undefined 自定义渲染边箭头 ### hiddenEdgeArrow - 类型：`boolean` - 默认值：`false` 隐藏边箭头 ## 菜单属性 ### nodeKey - 类型：`string` - 默认值：undefined - 必要节点类型唯一标识 ### nodeType - 类型：`string` - 默认值：undefined - 必要节点类型，枚举值，支持 'normal','multi','placeholder'。分别为普通节点、分叉节点以及占位节点。普通节点数据用`nodeDetail`设置获取。分叉节点数据用`paths`设置获取，可定义`defaultPaths`来表示默认的分叉数据。 ### validator - 类型：`(node: NodeDefine) => boolean | string` - 默认值：undefined 自定义数据校验，返回`true`与非空`string`则校验失败，给节点新增校验失败样式，可通过`validateNodesData`获取相应节点 ```javascript validator: (node) => { if (node.nodeDetail && isNaN(node.nodeDetail.content)) { return '券内容需为数字'; } return false; }, ``` ### renderForm - 类型：`(node: NodeDefine) => React.FC` - 默认值：undefined 自定义渲染表单 ### renderInfo - 类型：`(node: NodeDefine) => React.FC | null` - 默认值：undefined 自定义渲染预览信息 ### actions - 类型：`NodeActions[]` - 默认值：[NodeActions.copyCurrent,NodeActions.copyAll,NodeActions.paste,NodeActions.removeCurrent,NodeActions.removeAll,NodeActions.join] 自定义操作按钮列表。默认操作按钮都有，但分叉节点没有复制当前节点和删除当前节点操作，占位节点只有粘贴操作，默认第一个节点 id 为`00`没有删除当前节点以及删除所有子节点操作。 ### menu - 类型：`string` - 默认值：undefined 所属菜单 ### name - 类型：`string` - 默认值：undefined 节点名称 ### icon - 类型：`string` - 默认值：undefined 节点图标类名