vue自定义树形组件，如何实现这种特殊的连线？-灵析社区

乘03060920

[https://codesandbox.io/s/keen-artem-4kg2c3?file=/src/componen...](https://link.segmentfault.com/?enc=P5jq5zGpQA2xlTbnuWeh8Q%3D%3D.1Snp7Y6N3z6A0rk4h%2BToBnFlQMw2cpaSFKXianMmPqviQ1n8rZPyyoeLeqFfkfwFYsnGQ4Hkjr%2FZD5yn3ciwuRwqF0b2a6mbq0QJ5lBdQ1g%3D) 参考效果（节点内容内容忽略，主要是“连接线”）： ![](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/c5329960612e0748a9036c768937ef96.png) 当前样式，正常的链接线都有点问题，中间节点躲出来一截不知怎么处理。 ![](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250103/0cf4eabb1b9c7fabb688193f4548f61b.png)

阅读量：19

点赞量：0

问AI
DOM 节点结构设计问题 连接线分为横向连接线跟纵向连接线 可以设计在一起，比如 ztree、antDesign tree "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241211/e640281b64dc8a80338e3f5334b6a834.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241211/d30f164038e8efb3e38da2937d0013be.png) ，也可以分成两个dom 放在节点内部跟外部 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241211/222763b9ed20ab6b0e49196d03618d9b.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241211/9ae4b06bb53958cb52a5ddf03b252678.png)
,
同问