• 演示
• 可配置项
• 特殊说明
  • defaultScrollInfo
  • layoutStrategy

配置项

演示

layoutStrategy:

<template>
  <div class="container">
    <div class="layout-strategy">
      layoutStrategy:
      <el-select v-model="layoutStrategy" :style="{ width: '250px' }">
        <el-option
          v-for="item in Object.keys(LAYOUT_STRATEGY)"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
    </div>
    <input
      class="scale-handler"
      type="range"
      :min="0.1"
      :max="2"
      :step="0.01"
      v-model="scaleRatio"
    />
    <vis-tree
      :key="layoutStrategy"
      class="vis-tree"
      ref="visTree"
      :data-source="dataSource"
      :scale-ratio="scaleRatio"
      :options="{ ...options, layoutStrategy }"
    >
      <template v-slot:node="nodeSlotProps">
        <div class="node-container">
          <div class="node-content">
            {{nodeSlotProps.node.id}}
          </div>

          <i
            v-if="nodeSlotProps.node.items && nodeSlotProps.node.items.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.id)"
          />
        </div>
      </template>
    </vis-tree>
  </div>
</template>

<script>
import VisTree, { LAYOUT_STRATEGY } from '@vis-tree/vue';
import ElSelect from 'element-plus/lib/el-select';
import ElOption from 'element-plus/lib/el-option';
import 'element-plus/lib/theme-chalk/index.css';

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

export default {
  props: {
    msg: String,
  },
  components: {
    VisTree,
    ElSelect,
    ElOption
  },
  data() {
    return {
      LAYOUT_STRATEGY,
      layoutStrategy: LAYOUT_STRATEGY.TOP_CENTER,
      scaleRatio: 1,
      dataSource: originDataSource,
      options: {
        defaultScrollInfo: {
          key: originDataSource.id,
        },
        defaultExpandAll: true,
        customKeyField: "id",
        customChildrenField: "items",
        nodeWidth: 60,
        nodeHeight: 40,
        siblingInterval: 20,
        levelInterval: 20,
      }
    };
  },
  methods: {
    toggleNodeExpanded(key) {
      this.$refs.visTree.toggleNodeExpanded(key);
    },
  }
};
</script>

<style scoped>
.container {
  position: relative;
  background-color: #fff;
  border: 1px solid #ebedf1;
  border-radius: 1px;
}
.layout-strategy {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px;
  z-index: 1;
  background: #f2f5fa;
}
.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 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.node-switcher {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: #fff;
}
</style>

可配置项

名称	描述	类型	默认值
useVirtualRender	是否使用虚拟渲染	boolean	true
useAnimation	是否使用动画 动画的渲染依赖于 useVirtualRender，如果 useVirtualRender = false，那么动画不会生效	boolean	true
useWheelScroll	是否使用鼠标滚轮移动树	boolean	true
defaultScrollInfo	用来指定初始时移动某个节点到画布的某个位置	object	---
defaultScrollInfo.key	节点的标识符	string or number	---
defaultScrollInfo.top	节点上边界到画布上边界的距离	string or number	"50% - nodeHeight * 50%"
defaultScrollInfo.left	节点左边界到画布左边界的距离	string or number	"50% - nodeWidth * 50%"
defaultExpandAll	是否默认展开全部节点	boolean	false
defaultExpandRoot	是否默认展开根节点	boolean	true
defaultExpandedKeys	由默认展开的节点标识符组成的数组	Array<string &#124 number>	---
customKeyField	节点标识符对应的属性名称	string	"key"
customChildrenField	节点子节点列表对应的属性名称	string	"children"
layoutStrategy	布局策略	string	LAYOUT_STRATEGY.TOP_CENTER
nodeWidth	节点宽度	number	60
nodeHeight	节点高度	number	30
siblingInterval	同胞节点的间距	number	30
levelInterval	不同层级的间距	number	60
lineSize	连接线宽度	number	1
lineColor	连接线颜色	string	"black"
lineType	连接线类型	"straight" &#124 "none"	"straight"

特殊说明

defaultScrollInfo

defaultScrollInfo.top 和 defaultScrollInfo.left 的值可以是数值或字符串：

• 100 等价于 100px
• 30% 等价于 canvasSize * 30%
• 30% + 100 等价于 canvasSize * 30% + 100px

layoutStrategy

目前共有 6 种布局策略，可以通过上面的演示查看不同布局策略的实际效果

import { LAYOUT_STRATEGY } from "@vis-tree/vue";

// 默认值
LAYOUT_STRATEGY.TOP_CENTER;

LAYOUT_STRATEGY.BOTTOM_CENTER;

LAYOUT_STRATEGY.CENTER_LEFT;

LAYOUT_STRATEGY.CENTER_RIGHT;

LAYOUT_STRATEGY.TOP_LEFT_ALIGN_LEFT;

LAYOUT_STRATEGY.TOP_LEFT_ALIGN_TOP;