专业的网站建设制作服务,近10天的时事新闻,郑州网站建设专业乐云seo,企业营销型网站类型antdesignvue的树形组件要实现组件叶子节点横向排列有点坑#xff0c;没有 配置属性#xff0c;需要自己想办法。
要实现的效果 看tree组件的dom结构#xff0c;父元素flex竖向布局#xff0c;子项不论节点层级都在同一层#xff01;#xff01;#xff01;
难点在于想…
antdesignvue的树形组件要实现组件叶子节点横向排列有点坑没有 配置属性需要自己想办法。
要实现的效果 看tree组件的dom结构父元素flex竖向布局子项不论节点层级都在同一层
难点在于想直接把其中某一些节点横向布局排列。 我的实现思路核心还是通过给叶子节点绑定类名通过类名来覆盖原始的样式。
1、.ant-tree-list-holder-inner 的包裹元素上去掉 flex属性
style langscss 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然后覆盖原有样式比如边距等。 然后就能实现叶子项横向排列了。
祝好
