Vue 树形选择器(Vue tree select)组件在搭建 Vue 的 app 中特别常用,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
④过滤及搜索
- Vue draggable nested Tree - 纯树形选择,轻盈趁手
Vue draggable nested Tree简洁的树形Vue组件。虽然UI简单,但整体轻盈,功能主要集中在树状结构以及鼠标拖拽。对于排序、分组更换这类需求来说是不错的选择。
- Vue Tree List Component - 前端可编辑、删除,拖拽,界面友好
Vue Tree List Component是一套制作精良的Vue树形组件。可以直接在前端UI上操作编辑。直接新建文件夹或子节点,重命名节点名,删除节点。拖拽节点到任意子集中,拖拽UI细节做的非常棒,有辅助虚线,方便在拖拽操作时,定位拖拽位置
- Vue Tree select - 基础款树形选择器,没有多余功能
Vue Tree select是一个最简单形式的Vue树状组件。没有任何其他多余的功能,他就只有多层树状结构,简单的开合以及点击选择。针对仅需要树状选择组件的使用场景。
- Vue Tree Chart - 传图树形选择器 UI 适合展示树状关系
Vue Tree Chart最突出的特点是它的UI设计,它才是传统意义上的树形结构,从树根开始,逐渐展开。特别适合展示权限系统或者公司人员结构这种,能很清晰的展示平行关系。
6.Liquor-Tree - 移动端友好,可拖拽,灵活配置
Liquor Tree是一款轻量级树形选择器,对移动段友好,可拖放,支持键盘快捷键,每个操作动作都有事件记录,与Vue高度整合。Liquor Tree代码简洁,扩展性强,可根据你的应用场景按需定制。7.V-TreeView - 基础款树形选择器,可换 icon,可过滤搜索
V-TreeView树形选择器UI复古,可定义icon可定制上下文菜单,可做简单过滤搜索。代码优雅简洁,没有任何多余功能,很适合做最基础的树形选择功能。
更多推荐