vue-willtable/strategy-doc/docs/api/methods.md

An editable table component for Vue

---
sidebarDepth: 2
---

# 方法

## setData

- 类型：`(metadata: StrategyMetadata) => void`

设置画布数据

## getData

- 类型：`() => StrategyMetadata`

获取画布数据

## saveNodeData

- 类型：`(node: NodeDefine) => void`

保存单个节点数据

## getEmptyNodes

- 类型：`() => NodeDefine[]`

获取空数据节点列表

## validateNodesData

- 类型：`() => StrategyMetadata | NodeDefine[]`

校验节点数据

## undo

- 类型：`() => void`

撤销，默认支持`10`条历史记录，可通过 maxHistory 修改最大历史记录条数

## recovery

- 类型：`() => void`

重做，默认支持`10`条历史记录，可通过 maxHistory 修改最大历史记录条数

## canvasAddScale

- 类型：`() => void`

画布放大，通过 `maxScale` 控制最大放大倍数

## canvasReduceScale

- 类型：`() => void`

画布缩小，通过 `minScale` 控制最小缩小倍数

## canvasResetScale

- 类型：`() => void`

重置缩放倍数

## draggableMenuItem

- 类型：`(dom: React.ReactElement, node: NodeMenuItem) => React.ReactElement`

给自定义菜单项添加拖拽事件，使其支持拖拽添加至画布中

```javascript
import { draggableMenuItem } from "@didi/strategy";

<div className="menu-wrapper">
  <ul className="menu-list">
    {NodeMenuList.map((node) => {
      return (
        <li className="menu-nodes-item" key={node.name}>
          {draggableMenuItem(
            <div className="menu-nodes-icon">
              <i className={node.icon} />
            </div>,
            node
          )}
          <p className="menu-nodes-name">{node.name}</p>
        </li>
      );
    })}
  </ul>
</div>;
```