Vue3 Tree Org

https://sangtian152.github.io/vue3-tree-org
Admin
Vue3 Tree Org is a Vue 3.x component library for creating interactive organizational charts with...
Tokens:4,874
Snippets:28
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Vue3 Tree Org

Source: https://sangtian152.github.io/vue3-tree-org/guide

Install the package using npm or yarn. This is required before importing the component into your project.

```bash
npm i vue3-tree-org -S
# or 
yarn add vue3-tree-org
```

--------------------------------

### Install vue3-tree-org with NPM

Source: https://sangtian152.github.io/vue3-tree-org

Use this command to add the vue3-tree-org library to your project if you are using NPM for package management.

```bash
# install in your project
npm install -S vue3-tree-org
```

--------------------------------

### Install vue3-tree-org with Yarn

Source: https://sangtian152.github.io/vue3-tree-org

Use this command to add the vue3-tree-org library to your project if you are using Yarn for package management.

```bash
# install in your project
yarn add vue3-tree-org
```

--------------------------------

### Vue3 Tree Org Basic Example

Source: https://sangtian152.github.io/vue3-tree-org/demo

Configures a tree organization chart with options for horizontal layout, collapsability, node editing, and drag-and-drop behavior. Includes event handlers for node clicks, double clicks, and drag events. Node styling can be customized using color pickers.

```vue
<template>
  <div>
    <div style="display: flex; padding: 10px;">
        <div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
        <div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
        <div style="margin-right: 10px"><el-switch v-model="disaled"></el-switch> 禁止编辑</div>
        <div style="margin-right: 10px"><el-switch v-model="onlyOneNode"></el-switch> 仅拖动当前节点</div>
        <div style="margin-right: 10px"><el-switch v-model="cloneNodeDrag"></el-switch> 拖动节点副本</div>
    </div>
    <div style="padding: 0 10px 10px">
      背景色：<el-color-picker v-model="style.background" size="small"></el-color-picker>&nbsp;
      文字颜色：<el-color-picker v-model="style.color" size="small"></el-color-picker>&nbsp;
    </div>
      <div style="height: 400px;">
        <vue3-tree-org
          :data="data"
          center
          :horizontal="horizontal"
          :collapsable="collapsable"
          :label-style="style"
          :only-one-node="onlyOneNode"
          :clone-node-drag="cloneNodeDrag"
          :before-drag-end="beforeDragEnd"
          @on-node-drag="nodeDragMove"
          @on-node-drag-end="nodeDragEnd"
          @on-contextmenu="onMenus"
          @on-expand="onExpand"
          @on-node-dblclick="onNodeDblclick"
          @on-node-click="onNodeClick"
        />
      </div>
  </div>
</template>
<script>
import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'
import { ref } from 'vue'
export default {
  name: "baseTree",
  components: {
    ElSwitch,
    ElColorPicker
  },
  setup() {
    const cloneNodeDrag = ref(true)
    return {
      cloneNodeDrag
    }
  },
  data() {
    return {
      data: {
          "id":1,"label":"xxx科技有限公司",
          "children":[
              {
                  "id":2,"pid":1,"label":"产品研发部",
                  "style":{"color":"#fff","background":"#108ffe"},
                  "children":[
                      {"id":6,"pid":2,"label":"禁止编辑节点","disabled":true},
                      {"id":8,"pid":2,"label":"禁止拖拽节点","noDragging":true},
                      {"id":10,"pid":2,"label":"测试"}
                  ]
              },
              {
                  "id":3,"pid":1,"label":"客服部",
                  "children":[
                      {"id":11,"pid":3,"label":"客服一部"},
                      {"id":12,"pid":3,"label":"客服二部"}
                  ]
              },
              {"id":4,"pid":1,"label":"业务部"}
          ]
      },
      horizontal: true,
      collapsable: true,
      onlyOneNode: false,
      expandAll: true,
      disaled: false,
      style: {
        background: "#fff",
        color: "#5e6d82",
      },
    };
  },
  created() {
    // this.toggleExpand(this.data, this.expandAll);
  },
  methods: {
    onMenus({ node, command }) {
      console.log(node, command);
    },
    onExpand(e, data) {
      console.log(e, data);
    },
    onExpandAll(b) {
      console.log(b)
    },
    nodeDragMove(data) {
      console.log(data);
    },
    beforeDragEnd(node, targetNode) {
      return new Promise((resolve, reject) => {
        if (!targetNode) reject()
        if (node.id === targetNode.id) {
          reject()
        } else {
          resolve()
        }
      })
    },
    nodeDragEnd(data, isSelf) {
      console.log(data, isSelf);
    },
    onNodeDblclick() {
      console.log('onNodeDblclick')
    },
    onNodeClick(e, data) {
      ElMessage.info(data.label);
    },
    expandChange() {
      // this.toggleExpand(this.data, this.expandAll);
    },
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach((item) => {
          item.expand = val
          if (item.children) {
            this.toggleExpand(item.children, val);
          }
        });
      } else {
        data.expand = val
        if (data.children) {
          this.toggleExpand(data.children, val);
        }
      }
    },
  },
};
</script>

```

--------------------------------

### Customize Node and Expand Button with Slots

Source: https://sangtian152.github.io/vue3-tree-org/demo

Use the `default` slot to customize node content and the `expand` slot for expand buttons. This example shows custom content for nodes, including a 'custom-content' div and the node's label. The expand slot displays the number of children.

```vue
<template>
    <div style="height: 400px;">
        <vue3-tree-org
            :data="data"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-style="style"
            :node-draggable="true"
            :scalable="false"
            :only-one-node="onlyOneNode"
            :default-expand-level="1"
            :clone-node-drag="cloneNodeDrag"
            @on-contextmenu="onMenus"
            @on-node-click="onNodeClick"
        >
            <!-- 自定义节点内容 -->
            <template v-slot="{node}">
                <div class="tree-org-node__text node-label">
                    <div class="custom-content">自定义内容</div>
                    <div>节点名称：{{node.label}}</div>
                </div>
            </template>
            <!-- 自定义展开按钮 -->
            <template v-slot:expand="{node}">
                <div>{{node.children.length}}</div>
            </template>
        </vue3-tree-org>
    </div>
</template>
<script>
export default {
  name: "slotTree",
  data() {
    return {
      data: {
          "id":1,"label":"xxx科技有限公司",
          "children":[
              {
                  "id":2,"pid":1,"label":"产品研发部",
                  "style":{"color":"#fff","background":"#108ffe"},
                  "children":[
                      {"id":6,"pid":2,"label":"禁止编辑节点","disabled":true},
                      {"id":8,"pid":2,"label":"禁止拖拽节点","noDragging":true},
                      {"id":10,"pid":2,"label":"测试"}
                  ]
              },
              {
                  "id":3,"pid":1,"label":"客服部",
                  "children":[
                      {"id":11,"pid":3,"label":"客服一部"},
                      {"id":12,"pid":3,"label":"客服二部"}
                  ]
              },
              {"id":4,"pid":1,"label":"业务部"}
          ]
      },
      horizontal: false,
      collapsable: true,
      onlyOneNode: true,
      cloneNodeDrag: true,
      expandAll: true,
      style: {
        background: "#fff",
        color: "#5e6d82",
      },
    };
  },
  methods: {
    onMenus({ node, command }) {
      console.log(node, command);
    },
    onNodeClick(e, data) {
      this.$Message.info(data.label);
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-org-node__text {
    text-align: left;
    font-size: 14px;
    .custom-content {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid currentColor;
    }
}
</style>
```

--------------------------------

### Import and Use Vue3 Tree Org

Source: https://sangtian152.github.io/vue3-tree-org/guide

Import the component and its CSS in your main Vue application entry file (e.g., main.js). Then, use the `app.use()` method to register it globally.

```javascript
import { createApp } from 'vue'
import vue3TreeOrg from 'vue3-tree-org';
import "vue3-tree-org/lib/vue3-tree-org.css";

const app = createApp(App)

app.use(vue3TreeOrg)
app.mount('#app')
```

--------------------------------

### Custom Context Menu Implementation

Source: https://sangtian152.github.io/vue3-tree-org/demo

Use the `define-menus` attribute to provide an array of menu items, each with a `name` and `command`. The `on-contextmenu` event handler can be used to dynamically define menus based on node properties. Ensure commands are unique to avoid conflicts.

```vue
<template>
    <div style="height: 400px;">
        <vue3-tree-org
            :data="data"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-style="style"
            :tool-bar="false"
            :scalable="false"
            :node-draggable="true"
            :define-menus="defineMenus"
            :only-one-node="onlyOneNode"
            :clone-node-drag="cloneNodeDrag"
            @on-contextmenu="onMenus"
        />
    </div>
</template>
<script>
export default {
  name: "menuTree",
  data() {
    return {
      data: {
          "id":1,"label":"xxx科技有限公司",
          "children":[
              {
                  "id":2,"pid":1,"label":"产品研发部",
                  "style":{"color":"#fff","background":"#108ffe"},
                  "children":[
                      {"id":6,"pid":2,"label":"禁止编辑节点","disabled":true},
                      {"id":8,"pid":2,"label":"禁止拖拽节点","noDragging":true},
                      {"id":10,"pid":2,"label":"测试"}
                  ]
              },
              {
                  "id":3,"pid":1,"label":"客服部",
                  "children":[
                      {"id":11,"pid":3,"label":"客服一部"},
                      {"id":12,"pid":3,"label":"客服二部"}
                  ]
              },
              {"id":4,"pid":1,"label":"业务部"}
          ]
      },
      horizontal: false,
      collapsable: true,
      onlyOneNode: true,
      cloneNodeDrag: true,
      expandAll: true,
      /* defineMenus:[
          { name:'复制', command: 'copy' },
          { name:'新建', command: 'add' },
          { name:'编辑', command: 'edit' },
          { name:'自定义', command: 'defind' },
      ], */
      style: {
        background: "#fff",
        color: "#5e6d82",
      },
    };
  },
  methods: {
    defineMenus(e, node) {
      if (node.disabled) {
        return [
            { name:'复制', command: 'copy' },
            { name:'自定义', command: 'defind' },
        ]
      } else {
        return [
            { name:'复制', command: 'copy' },
            { name:'新建', command: 'add' },
            { name:'编辑', command: 'edit' },
            { name:'自定义', command: 'defind' },
        ]
      }
    },
    onMenus({ node, command }) {
      console.log(node, command);
    },
    onNodeClick(e, data) {
      this.$Message.info(data.label);
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-org-node__text {
    text-align: left;
    font-size: 14px;
    .custom-content {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid currentColor;
    }
}
</style>
```

--------------------------------

### Lazy Load Child Nodes

Source: https://sangtian152.github.io/vue3-tree-org/demo

Implement lazy loading for child nodes using the `lazy` prop and the `load` method. The `load` method receives the node and a resolve callback to provide the child data. Use `isLeaf: true` to explicitly mark a node as a leaf.

```Vue
<template>
    <div style="height: 400px;">
        <vue3-tree-org
            lazy
            :data="data"
            :load="loadData"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-style="style"
            :node-draggable="true"
            :scalable="false"
            @on-node-click="onNodeClick"
        />
    </div>
</template>
<script>
export default {
  name: "slotTree",
  data() {
    return {
      data: {
          "id":1,"label":"xxx科技有限公司"
      },
      horizontal: false,
      collapsable: true,
      expandAll: true,
      style: {
        background: "#fff",
        color: "#5e6d82",
      },
    };
  },
  methods: {
    loadData(node, resolve) {
      if (node.$$level === 0) {
          return resolve([{ label: 'region', id: `${node.id}-1`, pid: node.id }]);
      }
      if (node.$$level > 1) return resolve([]);
      setTimeout(() => {
        const data = [{
          label: 'leaf',
          id: `${node.id}-1`,
          pid: node.id,
          isLeaf: true
        }, {
          label: 'zone',
          id: `${node.id}-2`,
          pid: node.id,
        }];

        resolve(data);
      }, 100);
    },
    onNodeClick(e, data) {
      this.$Message.info(data.label);
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-org-node__text {
    text-align: left;
    font-size: 14px;
    .custom-content {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid currentColor;
    }
}
</style>
```

--------------------------------

### Filter Tree Nodes by Keyword

Source: https://sangtian152.github.io/vue3-tree-org/demo

Use the `filter-node-method` prop to filter tree nodes based on a keyword. The input's `v-model` is bound to the `keyword` data property, and the `filter` method is called on keydown.Enter.

```Vue
<template>
    <div class="tree-wrap" style="height: 400px;">
        <div class="search-box">
            <span>搜索：</span>
            <input type="text" v-model="keyword" placeholder="请输入搜索内容" @keydown.enter="filter" />
        </div>
        <vue3-tree-org
            ref="tree"
            :data="data"
            :horizontal="horizontal"
            :collapsable="collapsable"
            :label-style="style"
            :node-draggable="true"
            :scalable="false"
            :only-one-node="onlyOneNode"
            :default-expand-level="1"
            :filter-node-method="filterNodeMethod"
            :clone-node-drag="cloneNodeDrag"
            @on-restore="restore"
            @on-contextmenu="onMenus"
            @on-node-click="onNodeClick"
        />
    </div>
</template>
<script>
export default {
  name: "searchTree",
  data() {
    return {
      data: {
          "id":1,"label":"xxx科技有限公司",
          "children":[
              {
                  "id":2,"pid":1,"label":"产品研发部",
                  "style":{"color":"#fff","background":"#108ffe"},
                  "children":[
                      {"id":6,"pid":2,"label":"禁止编辑节点","disabled":true},
                      {"id":8,"pid":2,"label":"禁止拖拽节点","noDragging":true},
                      {"id":10,"pid":2,"label":"测试"}
                  ]
              },
              {
                  "id":3,"pid":1,"label":"客服部",
                  "children":[
                      {"id":11,"pid":3,"label":"客服一部"},
                      {"id":12,"pid":3,"label":"客服二部"}
                  ]
              },
              {"id":4,"pid":1,"label":"业务部"}
          ]
      },
      keyword: '',
      horizontal: false,
      collapsable: true,
      onlyOneNode: true,
      cloneNodeDrag: true,
      expandAll: true,
      style: {
        background: "#fff",
        color: "#5e6d82",
      },
    };
  },
  methods: {
    onMenus({ node, command }) {
      console.log(node, command);
    },
    restore() {
        console.log('restore')
    },
    filter(){
        this.$refs.tree.filter(this.keyword)
    },
    filterNodeMethod(value, data) {
        console.log(value, data)
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
    },
    onNodeClick(e, data) {
      this.$Message.info(data.label);
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
  },
};
</script>
<style lang="scss" scoped>
.tree-wrap {
    position: relative;
    padding-top: 52px;
}
.search-box {
    padding: 8px 15px;
    position: absolute;
    top: 0;
    left: 0;
    input {
        width: 200px;
        height: 32px;
        border:1px solid #ddd;
        outline: none;
        border-radius: 5px;
        padding-left: 10px;
    }
}
.tree-org-node__text {
    text-align: left;
    font-size: 14px;
    .custom-content {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid currentColor;
    }
}
</style>
```
Tokens:
Raw