@giszhc/tree-line-style：Element Plus的ElTree组件连接线，看这里
@giszhc/tree-line-style
一个扩展 Element Plusel-tree树组件连接线样式的 CSS 库，让树组件的层级关系更加清晰美观。
✨ 特性
- 🎨 自定义连接线颜色、宽度、样式
- 🔧 可配置的节点缩进和横线长度
- 📱 支持 dashed 和 solid 两种线型
- 🚀 开箱即用，无需复杂配置
- 💡 优化叶子节点的图标占位
📦 安装
npminstall@giszhc/tree-line-style# 或pnpmadd@giszhc/tree-line-style# 或yarnadd@giszhc/tree-line-style🚀 快速使用
在项目中引入样式后，直接在el-tree组件上添加类名即可：
<el-treeclass="normal-tree-line-style":data="data"/>⚙️ 自定义配置
通过 CSS 变量来自定义连接线的样式：
<el-treeclass="normal-tree-line-style"style="--tree-line-color:#409EFF;--tree-line-width:2px;":data="data"/>可用的 CSS 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
--tree-line-color | #DCDFE6 | 连接线颜色 |
--tree-line-width | 1px | 连接线宽度 |
--tree-line-style | dashed | 线条类型：dashed/solid |
--tree-node-padding | 16px | 节点缩进距离 |
--tree-horizontal-line-width | 20px | 横线长度 |
--tree-line-top | 18px | 横线距离节点顶部距离 |
--tree-line-left-offset | -2px | 连接线左偏移 |
--tree-no-icon-placeholder-size | 4px | 叶子节点图标占位大小 |
📝 完整示例
<el-treeclass="normal-tree-line-style"style="--tree-line-color: #67C23A; --tree-line-width: 2px; --tree-line-style: solid; --tree-node-padding: 20px;":data="treeData":expand-on-click-node="false"/>🎯 注意事项
- 直接使用：直接在
el-tree组件上添加normal-tree-line-style类名即可 - Element Plus 依赖：本库基于 Element Plus 的
el-tree组件，请确保已安装并引入 Element Plus - 样式优先级：如果与其他样式冲突，可以通过提高选择器优先级或使用
!important解决
📄 许可证
MIT License
🤝 贡献
欢迎提交 Issue 和 Pull Request！
用心打造，专为 Element Plus 用户而作 ❤️
如果这篇文章对你有帮助，欢迎点赞 👍 收藏 ⭐ 关注 👀
完结，撒花✿✿ヽ(°▽°)ノ✿