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，然后覆盖原有样式，比如边距等。
然后就能实现叶子项横向排列了。
祝好！
