antdesign vue tree 节点横向排列

Ant Design Vue Tree 组件默认是垂直排列的，如果需要横向排列，可以通过自定义样式来实现。

以下是一个简单的示例代码，可以帮助您实现横向排列的 Tree 节点：

<template>
  <div class="horizontal-tree">
    <a-tree :tree-data="treeData" :show-icon="false">
      <template slot="title" slot-scope="{ title }">
        <div class="tree-node">{{ title }}</div>
      </template>
    </a-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: "Node 1",
          key: "1",
          children: [
            {
              title: "Child Node 1",
              key: "2",
            },
            {
              title: "Child Node 2",
              key: "3",
            },
          ],
        },
        {
          title: "Node 2",
          key: "4",
          children: [
            {
              title: "Child Node 3",
              key: "5",
            },
            {
              title: "Child Node 4",
              key: "6",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.horizontal-tree {
  display: flex;
  .ant-tree {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .tree-node {
    margin: 0 20px;
  }
}
</style>

在上面的示例中，通过给 Tree 组件的父元素设置 `display: flex`，并设置 `.ant-tree` 元素的 `flex-direction: row`，来实现横向排列。同时，通过自定义 `title` 插槽，将默认的节点样式替换成一个带有样式的 `div` 元素。

希望能对您有所帮助。