el-tree拖动监听
时间: 2023-11-07 17:06:02 浏览: 149
可以通过监听 el-tree 的 node-drag-start 和 node-drag-end 事件来实现拖动的监听。其中,node-drag-start 事件在拖动开始时触发,node-drag-end 事件在拖动结束时触发。在事件处理函数中,可以获取到拖动的节点信息和目标节点信息。
具体实现可以参考以下代码:
```html
<template>
<el-tree
:data="data"
:props="defaultProps"
@node-drag-start="handleDragStart"
@node-drag-end="handleDragEnd"
></el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1'
},
{
label: '二级 1-2'
}
]
},
{
label: '一级 2',
children: [
{
label: '二级 2-1'
},
{
label: '二级 2-2'
}
]
}
],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleDragStart(draggingNode, event) {
console.log('draggingNode:', draggingNode);
console.log('event:', event);
},
handleDragEnd(draggingNode, dropNode, dropType, event) {
console.log('draggingNode:', draggingNode);
console.log('dropNode:', dropNode);
console.log('dropType:', dropType);
console.log('event:', event);
}
}
};
</script>
```
阅读全文