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，然后覆盖原有样式，比如边距等。
然后就能实现叶子项横向排列了。文章来源：https://www.toymoban.com/news/detail-789008.html
祝好！文章来源地址https://www.toymoban.com/news/detail-789008.html
到了这里，关于ant design vue Tree组件叶子节点横向排列的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
