vue-willtable/strategy-doc/docs/guide/use.md

An editable table component for Vue

# 使用

## 要求

- 现代浏览器 和 IE11
- React >= 16.8

## 安装

使用 npm 或 yarn 安装

```
$ npm install @didi/strategy --save
```

```
$ yarn add @didi/strategy
```

## 示例

```javascript
import React, { useRef } from "react";
// 引入样式
import "@didi/strategy/dist/strategy.css";
// 引入组件与Type
import {
  StrategyEditor,
  StrategyRef,
  StrategyMetadata,
  NodeType,
} from "@didi/strategy";
// 引入定义的菜单列表
import { menuList } from "./menuList";

// 定义ref
const strategyRef: StrategyRef = useRef(null);

React.useEffect(() => {
  // 定义画布数据
  const data: StrategyMetadata = {
    nodeMap: {
      "00": {
        nodeId: "00",
        nodeKey: "userEvent",
        nodeType: NodeType.multi,
        paths: [
          {
            key: "01",
            name: "Path 1",
            data: {
              type: "bubble",
            },
          },
        ],
      },
      "01": {
        nodeId: "01",
        nodeKey: "placeholder",
        nodeType: NodeType.placeholder,
      },
    },
    edgeMap: {
      "00": {
        edgeId: "00",
        startNodeId: "00",
        endNodeId: "01",
      },
    },
  };
  // 设置画布数据
  strategyRef.current.setData(data);
}, []);

// 插入流程组件
<StrategyEditor ref={strategyRef} NodeMenuList={menuList} />;
```