021Element-plus的el-tree功能预研3-数据处理与拖拽事件监听回调

021Element-plus的el-tree功能预研3-数据处理与拖拽事件监听回调

el-tree全量属性与拖拽事件

<el-tree
  ref="treeRef"
  :data="programs.children"
  :props="defaultProps"
  :filter-node-method="filterNode"
  :allow-drop="allowDrop"
  :allow-drag="allowDrag"
  empty-text="请添加节点"
  draggable
  default-expand-all
  node-key="id"
  @node-click="handleClick"
  @node-drag-start="handleDragStart"
  @node-drag-enter="handleDragEnter"
  @node-drag-leave="handleDragLeave"
  @node-drag-over="handleDragOver"
  @node-drag-end="handleDragEnd"
  @node-drop="handleDrop"
>

props：映射data中的字段

/* 
props：映射data中的字段
label	指定节点标签为节点对象的某个属性值	string, function(data, node)	—	—
children	指定子树为节点对象的某个属性值	string	—	—
disabled	指定节点选择框是否禁用为节点对象的某个属性值	string, function(data, node)	—	—
isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效	string, function(data, node)	—	—
class	自定义节点类名	string, function(data, node)
 */
const defaultProps = {
   
  children: 'children',
  label: 'label',
}