【Ease UI】2026-04-08 组件更新:新增组件 xly-dept-tree 部门树组件与优化
即插即用的 Vue 3 业务组件库让中后台开发回归简单Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。每个组件都是独立的 .vue 单文件不依赖任何外部样式或工具函数直接复制到你的项目即可使用。它仅依赖 Element Plus却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点让组件复用像复制代码一样简单。✨ 新增xly-dept-tree部门树组件src/components/xly-dept-tree/用于展示组织架构、部门层级等树形结构数据支持树形数据和带pid的扁平数据两种格式自动构建树结构内置展开/折叠、节点选中、高亮等功能支持default-expand-level控制默认展开层级设为 0 全部展开支持selected-id外部控制选中节点select事件获取选中数据支持node-key自定义字段映射id/pid/label/children✨ 新增xly-table操作列固定支持新增action-fixed属性支持left|right可将操作列固定在左侧或右侧新增action-width属性自定义操作列宽度默认120px操作列固定时带有渐变阴影效果与数据列固定列协同工作 优化xly-table列宽优化未设置width和minWidth的列自动应用默认最小宽度100px避免列被无限压缩表格自动计算最小宽度确保列数较多时能正确显示横向滚动条 修复xly-table修复多选/单选时点击一个全部被选中的问题问题原因rowKey默认值为id当数据中没有id字段时所有行的 key 都为undefined解决方案将rowKey默认值改为undefined未设置时使用行索引作为 key 项目初衷在中后台系统开发中我们频繁遇到这些问题痛点现状组件库太重引入一套组件库需要学习整套 API、主题配置、构建配置成本太高复制粘贴难想从项目 A 复用一个组件到项目 B发现依赖了各种公共样式、工具函数拆不出来Element Plus 不够用基础组件有了但业务组件如带展开/收起的搜索表单、智能表格还得自己写重复造轮子每个项目都要重新实现表格选择、日期范围绑定、表单布局…于是Ease UI 诞生了。打造一套极致轻量、即拷即用的业务组件让开发者可以像复制一段代码一样简单地复用组件。✨ 核心优势 单文件组件即拷即用每个组件都是完全独立的.vue单文件包含✅ 完整的template模板✅ 独立的script setup逻辑✅ 自包含的style scoped样式无需任何配置直接复制.vue文件到你的项目即可使用# 只需要这一个文件src/components/xly-button/index.vue# 不需要❌ 额外的 CSS 文件 ❌ 公共样式依赖 ❌ 复杂的构建配置 ❌ 主题变量文件 仅依赖 Element Plus本组件库仅依赖 Element Plus及其图标库不引入其他 UI 组件库{dependencies:{element-plus:^2.13.6,element-plus/icons-vue:^2.3.2}}依赖说明Element Plus- 仅使用其图标组件element-plus/icons-vue无其他 UI 库- 不依赖 Ant Design Vue、Naive UI、Vuetify 等无样式库- 不依赖 Tailwind CSS、UnoCSS 等原子类框架纯 Vue 3 SCSS- 所有组件样式独立编写这意味着如果你的项目已经使用 Element Plus可以无缝集成如果你的项目没有 Element Plus只需安装它即可不会有多个 UI 库的样式冲突问题如果你觉得这个项目还不错或对你有帮助欢迎到 Gitee 或 GitHub 上点个 Star这是对作者最好的支持开源不易且用且珍惜。也欢迎关注公众号【Ease UI开源】不错过最新的更新动态。 Giteehttps://gitee.com/yun_hua_admin/ease-ui GitHubhttps://github.com/Momingyun/ease-ui 预览地址http://1.14.65.79