vue2-org-tree如何调整为竖直的

Vue2-org-tree是一个基于Vue.js实现的组织树组件，它默认是以水平布局展示数据。如果你想将其调整为竖直显示，你可以通过自定义样式或者修改组件内部的CSS样式来实现。以下是一种基本的思路：

1. **修改默认样式**:
首先，你需要找到`vue2-org-tree`组件中控制节点布局的样式文件，通常在`node_modules/vue2-org-tree/dist/styles/*.css`中。找到类似控制节点展开和折叠、以及节点排列方向的CSS规则，比如`.org-tree-node__content`, `.org-tree-node--expanded`等类。

然后，可以将`display: flex;` 或者 `flex-direction: row;` 更改为 `display: block;` 或者 `flex-direction: column;` 来切换到垂直布局。

2. **传递属性**:
如果上述方法不行，可能需要查看文档或源码，看是否允许通过props或API来设置布局。你可以尝试传入一个名为 `direction` 的属性，值设为 `'vertical'` 或 `'column'` 来改变布局。

<vue2-org-tree :direction="isVertical" />

然后，在组件的data里初始化`isVertical`变量，并在需要的时候设置它的值。

data() {
  return {
    isVertical: false,
  };
},
methods: {
  setIsVertical(isVertical) {
    this.isVertical = isVertical;
  },
}

3. **定制组件**:
如果以上方式都不满足需求，你可能需要创建一个新的自定义版本，对原始组件进行改造，使其接受并处理垂直布局的配置。

记得在调整之后，检查组件的行为是否正常，尤其是节点之间的交互和滚动是否受影响。