████████╗██████╗ ███████╗███████╗     ██████╗ ██████╗  █████╗ ██████╗ ██╗  ██╗
╚══██╔══╝██╔══██╗██╔════╝██╔════╝    ██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║  ██║
   ██║   ██████╔╝█████╗  █████╗█████╗██║  ███╗██████╔╝███████║██████╔╝███████║
   ██║   ██╔══██╗██╔══╝  ██╔══╝╚════╝██║   ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║
   ██║   ██║  ██║███████╗███████╗    ╚██████╔╝██║  ██║██║  ██║██║     ██║  ██║
   ╚═╝   ╚═╝  ╚═╝╚══════╝╚══════╝     ╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝  ╚═╝

tree-graph-vue

vue 樹狀思維導圖組件 Dendrogram Component

在線 DEMO OnlineDemo

編譯 Build Setup

# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn dev

# build for production with minification
yarn build

安裝 Install

yarn add tree-graph-vue

用法 Usage

<template>
  <div id="app">
    <h3>多列視圖</h3>
    <tree :nodes="nodes" :startId="nodes[0].id" />
    <h3>單列視圖</h3>
    <tree-single :nodes="nodes" :startId="nodes[0].id" />
  </div>
</template>

import TreeGraph from "tree-graph-vue";
Vue.use(TreeGraph);

操作

| 操作 | 按鍵 | | ------------------- | ---------------- | | 新增子節點 | Tab | | 新增兄弟節點 | Enter | | 刪除節點 | Delete | | 保存樹（file 模式） | Command/Ctrl + S |

組件屬性

| 屬性 | 說明 | 類型 | 是否必須 | 默認值 | | -------------------- | -------------------- | -------- | -------- | ------ | | nodes | 節點 | Array | 是 | - | | startId | 根節點 id | String | 是 | - | | singleColumn | 是否是單列視圖 | Boolean | 否 | false | | uncontrolled | 是否為非受控組件 | Boolean | 否 | true | | ITEM_HEIGHT | 節點元素高度 | Number | 否 | 50 | | BLOCK_HEIGHT | 節點塊高度 | Number | 否 | 30 | | FONT_SIZE | 節點字體大小 | Number | 否 | 14 | | INDENT | 縮進 | Number | 否 | 25 | | AVATAR_WIDTH | 頭像寬度 | Number | 否 | 22 | | CHECK_BOX_WIDTH | 勾選框寬度 | Number | 否 | 18 | | handleClickNode | 點擊節點事件 | Function | 否 | - | | handleClickDot | 點擊收起/展開事件 | Function | 否 | - | | handleCheck | 點擊勾選框事件 | Function | 否 | - | | handleChangeNodeText | 更改節點名事件 | Function | 否 | - | | handleAddNext | 向後添加兄弟節點事件 | Function | 否 | - | | handleAddChild | 添加子節點事件 | Function | 否 | - | | handleDeleteNode | 刪除節點事件 | Function | 否 | - | | handleSave | 保存樹 | Function | 否 | - |

節點屬性

| 屬性 | 說明 | 類型 | | ------------ | -------------------- | ------- | | id | 節點 id | String | | text | 節點文本 | String | | fatherId | 父節點 id | String | | children | 子節點 id | Array | | contract | 是否收起子節點 | Boolean | | showAvatar | 是否顯示頭像 | Boolean | | avatarUri | 頭像地址 | String | | showCheckbox | 是否顯示勾選框 | Boolean | | checked | 是否勾選 | Boolean | | showStatus | 是否顯示節點狀態 | Boolean | | hour | 節點（任務）工時 | Number | | limitDay | 節點（任務）剩余天數 | Number |