• 演示
• 特性
• 二次开发

介绍

演示

<template>
  <div class="container">
    <input
      class="scale-handler"
      type="range"
      :min="0.1"
      :max="2"
      :step="0.01"
      v-model="scaleRatio"
    />
    <vis-tree
      class="vis-tree"
      ref="visTree"
      :data-source="dataSource"
      :scale-ratio="scaleRatio"
      :options="options"
    >
      <template v-slot:node="nodeSlotProps">
        <div class="node-container">
          <div class="node-content">
            {{nodeSlotProps.node.key}}
          </div>

          <div class="node-dynamic-btns">
            <i
              v-if="nodeSlotProps.parentNode"
              class="delete-btn el-icon-delete"
              @click="() => handleDelete(nodeSlotProps.parentNode, nodeSlotProps.node.key)"
            />
            <i
              class="add-btn el-icon-plus"
              @click="() => handleAdd(nodeSlotProps.node, nodeSlotProps.expanded)"
            />
          </div>

          <i
            v-if="nodeSlotProps.node.children && nodeSlotProps.node.children.length > 0"
            class="node-switcher"
            :class="nodeSlotProps.expanded ? 'el-icon-circle-plus-outline' : 'el-icon-remove-outline'"
            :style="{ color: `${nodeSlotProps.expanded ? 'green' : 'red'}` }"
            @click="() => toggleNodeExpanded(nodeSlotProps.node.key)"
          />
        </div>
      </template>
    </vis-tree>
  </div>
</template>

<script>
import VisTree from '@vis-tree/vue';
import 'element-plus/lib/theme-chalk/index.css';

const originDataSource = {
  key: 'O',
  children: [
    {
      key: 'E',
      children: [
        {
          key: 'A',
        },
        {
          key: 'D',
          children: [
            {
              key: 'B',
            },
            {
              key: 'C',
            },
          ],
        },
      ],
    },
    {
      key: 'F',
    },
    {
      key: 'N',
      children: [
        {
          key: 'G',
        },
        {
          key: 'M',
          children: [
            {
              key: 'H',
            },
            {
              key: 'I',
            },
            {
              key: 'J',
            },
            {
              key: 'K',
            },
            {
              key: 'L',
            },
          ],
        },
      ],
    },
  ],
};

export default {
  props: {
    msg: String,
  },
  components: {
    VisTree,
  },
  data() {
    return {
      scaleRatio: 1,
      dataSource: originDataSource,
      options: {
          defaultScrollInfo: {
            key: originDataSource.key,
            top: 20,
          },
          defaultExpandAll: true,
          nodeWidth: 100,
          nodeHeight: 50,
      },
      count: 1,
      shouldExpandNodeKey: undefined
    };
  },
  updated() {
    if (this.shouldExpandNodeKey) {
      this.$refs.visTree.toggleNodeExpanded(this.shouldExpandNodeKey);
      this.shouldExpandNodeKey = undefined;
    }
  },
  methods: {
    toggleNodeExpanded(key) {
      this.$refs.visTree.toggleNodeExpanded(key);
    },

    handleDelete(parentNode, deleteKey) {
      parentNode.children = parentNode.children.filter(
        (item) => item.key !== deleteKey
      );
      this.dataSource = { ...this.dataSource };
    },
    
    handleAdd(node, expanded) {
      if (node.children) {
        node.children.push({ key: this.count });
      } else {
        node.children = [{ key: this.count }];
      }
      this.count += 1;
      if (!expanded) {
        this.shouldExpandNodeKey = node.key;
      }
      this.dataSource = { ...this.dataSource };
    }
  }
};
</script>

<style scoped>
.container {
  position: relative;
  background-color: #fff;
  border: 1px solid #ebedf1;
  border-radius: 1px;
}
.scale-handler {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}
.vis-tree {
  width: 100%;
  height: 400px;
}
.node-container {
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid black;
}
.node-content {
  margin-top: 3px;
  text-align: center;
}
.node-dynamic-btns {
  display: flex;
  justify-content: space-around;
}
.delete-btn {
  color: #ff4d4f
}
.add-btn {
  color: #1890ff
}
.node-switcher {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: #fff;
}
</style>

特性

• 支持用户使用自定义组件渲染节点和连接线
• 支持多种布局方式
• 支持动态插入/删除节点
• 支持虚拟渲染，节省性能开销
• 支持动画，动画过程中也会使用虚拟渲染

二次开发

核心逻辑全部封装在 @vis-tree/core 中，如果 @vis-tree/vue 不能满足你的全部要求，你可以绕开它，自己基于 @vis-tree/core 实现一个树形可视化组件。

在实现过程中，只需保持如下 DOM 结构即可：

<template>
  <div class="tree-canvas">
    <div class="tree-anchor">
      <div class="tree-node-wrapper">
        <div class="tree-node-content" />
        <div class="tree-node-head-line" />
        <div class="tree-node-tail-line" />
      </div>

      <div class="tree-junction-line" />

      <div class="tree-custom-line" />
    </div>
  </div>
</template>

<style>
.tree-canvas {
  position: relative;
  overflow: hidden;
  cursor: move;
}

.tree-anchor {
  position: absolute;
  top: 0;
  left: 0;
}

.tree-node-wrapper {
  position: absolute;
  cursor: auto;
}

.tree-node-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.tree-node-head-line,
.tree-node-tail-line,
.tree-junction-line,
.tree-custom-line {
  position: absolute;
  cursor: auto;
}
</style>