dt

drag-tree

draggable tree for vue https://www.npmjs.com/package/drag-tree

Showing:

Popularity

Downloads/wk

4

GitHub Stars

1

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

1

License

GPL-3.0

Type Definitions

Tree-Shakeable

No?

Categories

Readme

draggable-tree

draggable tree for vue inspired by Ant Design Vue and Element

use

npm install drag-tree

API

Attributes

参数说明类型默认值
list(v-model)展示数据array-
props配置选项,具体看下表object-
render-content树节点的内容区的渲染 FunctionFunction({node}-
default-expand-all默认是否展开所有节点booleantrue
allow-drop拖拽时判定目标节点能否被放置。type 参数有三种情况:'top'、'mid' 和 'bottom',分别表示放置在目标节点前、插入至目标节点和放置在目标节点后Function(dragNode:{node,parent}, dragOverNode:{node,parent}, type)-
rowKey每条数据的主键String
selected-key当前选中的节点 keyString
expanded-keys当前展开的节点 keyString

Props

参数说明类型默认值
title指定节点标签为节点对象的某个属性值stringtitle
children指定子树为节点对象的某个属性值stringchildren

Events

事件名称说明回调参数
select节点被点击时的回调被点击的节点的数据
drop拖拽成功完成时触发的事件Function({dragNode,dragParentNode},{dropNode,dropParentNode},type)(同 allow-drop 的 type)
expand节点展开时触发的事件Function(expandedKeys,{expanded:Boolean, node:OriginNode, e:DomEvent}})

Scoped Slot

name说明
renderContent自定义树节点的内容,参数为 { node,parentNode }

TODO

  • slot,slot-scope
  • css style
  • add props for title,children
  • add props allow-drop
  • support clone from outside
  • global toggle expandAll

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial