ant design vue Tree组件叶子节点横向排列

antdesignvue的树形组件要实现组件叶子节点横向排列有点坑，没有 配置属性，需要自己想办法。

要实现的效果

看tree组件的dom结构，父元素flex竖向布局，子项不论节点层级都在同一层！！！

难点在于想直接把其中某一些节点，横向布局排列。

我的实现思路核心还是通过给叶子节点绑定类名，通过类名来覆盖原始的样式。

1、.ant-tree-list-holder-inner 的包裹元素上去掉 flex属性

<style lang="scss" scoped>
.auth_tree {
  :deep(.ant-tree-list-holder-inner) {
    display: inline-block !important;
  }
}
</style>

2、给叶子节点绑定className

把树形结构递归遍历，给子叶添加class属性

因为antdesignvue文档上给数据添加class属性

const addClassToLeafNodes = treeData => {
  treeData.forEach(item => {
    if (item?.children?.length > 0) {
      addClassToLeafNodes(item.children);
    } else {
      if (item.permissionType === 2) item.class = 'yu_leaf';
    }
  });
  return treeData;
};

3、通过className定位到叶子节点，将所有叶子节点的display 改成 inline-flex。

<style>
.yu_leaf {
  display: inline-flex !important;
  width: 200px;
}
</style>

给不同层级的节点绑定className，然后覆盖原有样式，比如边距等。
然后就能实现叶子项横向排列了。

祝好！