账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element ui tree组件 draggable 怎么根据接口结果是否成功, 才让拖拽完成?
    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

      ```

      在这个示例中,我们定义了一个handleDragStarthandleDragOverhandleDragEnd方法,它们分别在拖拽开始、拖拽过半和拖拽结束时被调用。在这些方法中,我们使用了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事件中触发。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部