本文首发:《最好用的 7 个 Vue Tree select 树形组件 – 卡拉云》
Vue 树形选择器(Vue tree select)组件在搭建 Vue 的 app 中特地罕用,Vue tree select 除了简略的树形构造外,还有十分多样的性能来配合不同场景的应用。比方搜寻过滤,前端增加删除树枝,前端编辑批改子树名,拖拽排序,对用户操作事件记录等。本文记录了我本人应用多年最好用的 7 款 Vue tree select 组件,每一款都通过我理论测试,举荐给大家。
如果你正在搭建后盾管理工具,又不想解决前端问题,举荐应用卡拉云,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API,无需懂前端,仅需拖拽即可疾速搭建属于你本人的后盾管理工具,一周工作量缩减至一天,详见本文文末。
接下来介绍 7 款我本人罕用的 Vue tree select 第三方组件,它们各有特色,心愿能帮你找到适合你的选择器
- Vue JSTree – 全功能,树状单选多选,可拖拽,过滤搜寻
- Vue Draggable Nested Tree – 纯树形抉择,轻捷趁手
- Vue Tree List Component – 前端可编辑、删除,拖拽,界面敌对
- Vue Tree select – 根底款树形选择器,没有多余性能
- Vue Tree Chart – 传图树形选择器 UI 适宜展现树状关系
- Vue Liquor Tree – 挪动端敌对,可拖拽,灵便配置
- V-TreeView – 根底款树形选择器,可换 icon,可过滤搜寻
1. Vue JSTree – 全功能,树状单选多选,可拖拽,过滤搜寻
Vue JSTree 放在第一个举荐,因为它涵盖了大多数你须要的性能,单选多选,可更换 icon 简略的搜寻过滤,可任意拖拽子集到新汇合里。
Vue JSTree 更多功能:
- 没有依赖
- 单选、多选
- 自定义子集 icon
- 过滤及搜寻
扩大浏览:《顶级好用的 5 款 Vue table 表格组件测评与举荐》
2.Vue draggable nested Tree – 纯树形抉择,轻捷趁手
Vue draggable nested Tree 简洁的树形 Vue 组件。尽管 UI 简略,但整体轻捷,性能次要集中在树状构造以及鼠标拖拽。对于排序、分组更换这类需要来说是不错的抉择。
扩大浏览:《最好用的 7 款 Vue 3 富文本编辑器》
3.Vue Tree List Component – 前端可编辑、删除,拖拽,界面敌对
Vue Tree List Component 是一套制作精良的 Vue 树形组件,强烈推荐。用户能够间接在前端 UI 上操作编辑。间接新建文件夹或子节点,重命名节点名,删除节点。拖拽节点到任意子集中,拖拽 UI 细节做的十分棒,有辅助虚线,不便用户在拖拽操作时,定位拖拽地位。
扩大浏览:《Vue 搭建带预览的「上传图片」治理后盾》
4. Vue Tree select – 根底款树形选择器,没有多余性能
Vue Tree select 是一个最简略模式的 Vue 树状组件。没有任何其余多余的性能,他就只有多层树状构造,简略的开合以及点击抉择。针对仅须要树状抉择组件的应用场景。
扩大浏览:《手把手教你 Vue3+Node.js+Expres+MySQL 环境搭建》
5. Vue Tree Chart – 传图树形选择器 UI 适宜展现树状关系
Vue Tree Chart 最突出的特点是它的 UI 设计,它才是传统意义上的树形构造,从树根开始,逐步开展。特地适宜展现权限零碎或者公司人员构造这种,能很清晰的展现平行关系。
扩大浏览:《Vue Router 手把手教你搭 Vue3 路由》
6.Liquor-Tree – 挪动端敌对,可拖拽,灵便配置
Liquor Tree 是一款轻量级树形选择器,对挪动端敌对,可拖放,反对键盘快捷键,每个操作动作都有事件记录,与 Vue 高度整合。Liquor Tree 代码简洁,扩展性强,可依据你的利用场景按需定制。
扩大浏览:《最好用的 7 款 Vue admin 后盾管理系统测评》
7.V-TreeView – 根底款树形选择器,可换 icon,可过滤搜寻
V-TreeView 树形选择器 UI 复旧,可自定义 icon 可定制上下文菜单,可做简略过滤搜寻。代码优雅简洁,没有任何多余性能,很适宜做最根底的树形抉择性能。
扩大浏览:《如何在 Vue 中应用 Chart.js – 手把手教你搭可视化数据图表》
8. Vue 树形选择器总结
本文举荐了我本人应用多年的 7 款最好用的 Vue Tree select 树形选择器,这其中肯定有一款适宜你。这些第三方组件曾经帮咱们节俭大量开发工夫,如果还想更进一步,举荐应用卡拉云, 卡拉云内置树形选择器 和过滤搜寻性能,无需懂任何前端,仅需拖拽即可疾速生成。
卡拉云是新一代低代码开发工具,免装置部署,可一键接入包含 MySQL 在内的常见数据库及 API。可依据本人的工作流,定制开发。无需繁琐的前端开发,只须要简略拖拽,即可疾速搭建企业外部工具。 原来三天的开发工作量,应用卡拉云后可缩减至 1 小时,欢送收费试用卡拉云。
扩大浏览:
- 最好的 5 款翻译 API 接口比照测评
- 最好用的七大顶级 API 接口测试工具
- 最好用的 5 款 React 富文本编辑器
- Postman 应用教程 – 手把手教你 API 接口测试
- 最好的 6 个收费天气 API 接口比照测评
- 如何在 Vue 中导出数据至 Excel 表格