| <!-- |
| node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 |
| node-click 节点被点击时的回调 |
| node-contextmenu 当某一节点被鼠标右键点击时会触发该事件 |
| data 展示数据 |
| default-expand-all 是否默认展开所有节点 |
| node-drag-start 节点开始拖拽时触发的事件 |
| node-drag-enter 拖拽进入其他节点时触发的事件 |
| node-drag-leave 拖拽离开某个节点时触发的事件 |
| node-drag-over 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） |
| node-drag-end 拖拽结束时（可能未成功）触发的事件 |
| node-drop 拖拽成功完成时触发的事件 |
| allow-drop 拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 |
| allow-drag 判断节点能否被拖拽 |
| expand-on-click-node 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 |
| draggable 是否开启拖拽节点功能 |
| highlight-current 是否高亮当前选中节点，默认值是 false。 |
| --> |
| <el-tree |
| :data="data" |
| node-key="id" |
| default-expand-all |
| @node-drag-start="handleDragStart" |
| @node-drag-enter="handleDragEnter" |
| @node-drag-leave="handleDragLeave" |
| @node-drag-over="handleDragOver" |
| @node-drag-end="handleDragEnd" |
| @node-drop="handleDrop" |
| draggable |
| :allow-drop="allowDrop" |
| :allow-drag="allowDrag"> |
| </el-tree> |
| |
| <script> |
| export default { |
| data() { |
| return { |
| data: [{ |
| id: 1, |
| label: '一级 1', |
| children: [{ |
| id: 4, |
| label: '二级 1-1', |
| children: [{ |
| id: 9, |
| label: '三级 1-1-1' |
| }, { |
| id: 10, |
| label: '三级 1-1-2' |
| }] |
| }] |
| }, { |
| id: 2, |
| label: '一级 2', |
| children: [{ |
| id: 5, |
| label: '二级 2-1' |
| }, { |
| id: 6, |
| label: '二级 2-2' |
| }] |
| }, { |
| id: 3, |
| label: '一级 3', |
| children: [{ |
| id: 7, |
| label: '二级 3-1' |
| }, { |
| id: 8, |
| label: '二级 3-2', |
| children: [{ |
| id: 11, |
| label: '三级 3-2-1' |
| }, { |
| id: 12, |
| label: '三级 3-2-2' |
| }, { |
| id: 13, |
| label: '三级 3-2-3' |
| }] |
| }] |
| }], |
| defaultProps: { |
| children: 'children', |
| label: 'label' |
| } |
| }; |
| }, |
| methods: { |
| handleDragStart(node, ev) { |
| console.log('drag start', node); |
| }, |
| handleDragEnter(draggingNode, dropNode, ev) { |
| console.log('tree drag enter: ', dropNode.label); |
| }, |
| handleDragLeave(draggingNode, dropNode, ev) { |
| console.log('tree drag leave: ', dropNode.label); |
| }, |
| handleDragOver(draggingNode, dropNode, ev) { |
| console.log('tree drag over: ', dropNode.label); |
| }, |
| handleDragEnd(draggingNode, dropNode, dropType, ev) { |
| console.log('tree drag end: ', dropNode && dropNode.label, dropType); |
| }, |
| handleDrop(draggingNode, dropNode, dropType, ev) { |
| console.log('tree drop: ', dropNode.label, dropType); |
| }, |
| allowDrop(draggingNode, dropNode, type) { |
| if (dropNode.data.label === '二级 3-1') { |
| return type !== 'inner'; |
| } else { |
| return true; |
| } |
| }, |
| allowDrag(draggingNode) { |
| return draggingNode.data.label.indexOf('三级 3-2-2') === -1; |
| } |
| } |
| }; |
| </script> |
