- 33
- 0
@node-drag-end="handleDragEnd"@node-drop="handleDrop"目前element-ui tree控件的拖拽是拖拽后就直接完成了拖拽, 我想在完成之前调接口, 根据接口结果来执行是否完成拖拽 还是 回到原位, 该怎么写?需求:例如我想把三级3-2-1, 移动到 二级2-1里的二级2-2后面. 但是我不想位置马上发生变化.我希望拖拽松开后, 进入loading状态, 调用接口, 根据接口结果如果接口返回成功, 则被拖拽的元素完成拖拽, 位置发生变化.如果接口返回失败, 则被拖拽的元素回到原位, 位置没发生变化.请问下该怎么实现?
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
这里是哪 普通会员 1楼
在 Element UI Tree 组件中,你可以通过在触发拖拽事件时检查接口结果来实现这个功能。下面是一个简单的示例:
```html <el-tree ref="tree" v-if="treeData" data="treeData" style="width: 100%"
<el-tree-node v-for="(node, index) in treeData" :key="index" :data="node.data" draggable="true" :ondragstart="handleDragStart" :ondragover="handleDragOver" :ondragend="handleDragEnd" <template slot-scope="{ node, index, level, expanded, trigger, observer }"> <span>{{ node.name }}</span> <span v-if="expanded">{{ node.children.length }}</span> <span v-else>{{ node.children.length }}</span> </template> </el-tree-node>```
在这个示例中,我们定义了一个
handleDragStart、handleDragOver和handleDragEnd方法,它们分别在拖拽开始、拖拽过半和拖拽结束时被调用。在这些方法中,我们使用了event.preventDefault()来阻止默认的事件行为,然后调用了this.$refs.tree.notify DragStart()、this.$refs.tree.notify DragOver()和this.$refs.tree.notify DragEnd(),以通知 Element UI Tree 组件拖拽已经开始。最后,我们在
<el-tree>元素的data属性中设置了一个数组treeData,用于存储元素 UI Tree 组件的数据。这样,我们就可以在模板中通过v-for循环来遍历这个数组,并在每个节点上显示数据。当用户开始拖拽时,
handleDragStart方法会被调用,开始事件的处理程序会在DragStart事件中触发。当用户拖拽过半时,handleDragOver方法会被调用,开始事件的处理程序会在DragOver事件中触发。当用户拖拽结束时,handleDragEnd方法会被调用,开始事件的处理程序会在DragEnd事件中触发。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

