antdv4 a-tree树组件实现节点一行展示效果图首先上网查，搜到了相关官方的 issues，如下链接：树形控件

效果图

首先上网查，搜到了相关官方的 issues，如下链接：

在 17 年就有人提及需要支持横向排列，因为这个树形如果按照竖向的话，数据一多了，就显得很长。当时好像就没有解决这个问题，也看了 antd 之前的版本发现都没有这个配置项。

我打算用修改样式的方法来实现，不过发现新版本4.0的 dom 结构已经变了，不像是之前有 ul li 这种结构了，最底层的 child 节点外层没有包裹的元素，每一个都是单独的 div。不好搞，多次尝试下发现一个块属性 display: inline-flex （内联块级弹性伸缩盒模型），它能够把flex布局的子模块给浮动起来，接下来就好办了，

首先根据层级先设置class类名，这个文档上有，不再赘述，结果如下

我这里是三层结构，期望就是tree-son的节点能够一行排列，并且跟在tree-child的后面，而不是下面，因为我这第三层的数据不多，不用单独放一层，如果多的话，你们可以单独放一层，其中有些间距细节的调整，不再赘述，下面就是全部css样式


::v-deep(.feature-box) {
  .ant-tree-list-holder-inner {
    display: block !important;
  }

  .tree-father {
    margin-top: 5px;
    font-weight: bold;
  }

  .tree-child {
    display: contents !important;

    .ant-tree-switcher {
      display: none;
    }

    .ant-tree-indent {
      display: none;
    }

    .ant-tree-checkbox {
      display: block;
      height: 5px;
    }

    .ant-tree-checkbox-inner {
      top: 10px;
      left: 50px;
    }

    .ant-tree-node-content-wrapper {
      display: inline-block;
      width: 120px;
      margin-left: 67px;
    }
  }

  .tree-first-son,
  .no-tree-first-son {
    display: inline-flex !important;
    padding-right: 10px;

    .ant-tree-indent {
      width: 0px;
    }

    .ant-tree-switcher {
      width: 0;
    }
  }

  .tree-first-son {
    margin-left: 40px;
  }
}

最终效果如效果图所示，大功告成！