draggableTree for vue


Keywords
draggable, vue, tree
License
GPL-3.0
Install
npm install drag-tree@1.1.2-alpha.4

Documentation

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 树节点的内容区的渲染 Function Function({node} -
default-expand-all 默认是否展开所有节点 boolean true
allow-drop 拖拽时判定目标节点能否被放置。type 参数有三种情况:'top'、'mid' 和 'bottom',分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 Function(dragNode:{node,parent}, dragOverNode:{node,parent}, type) -
rowKey 每条数据的主键 String
selected-key 当前选中的节点 key String
expanded-keys 当前展开的节点 key String

Props

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

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