当前位置: 首页 > news >正文

Vue2 ElementUI Tree 拖动目标节点能否被放置及获取放置位置

一、背景:需求只允许拖动节点的先后顺序,不允许跨层级

二、代码及相关解释

<template><el-treeref="tree":data="data"node-key="id"draggablehighlight-current:allow-drop="allowDrop"@node-drop="drapNode"></el-tree>
</template>
<script>
export default {data () {return {data: []}},methods: {allowDrop (draggingNode, dropNode, type) { //只允许拖动节点调整与兄弟节点的前后顺序return dropNode.data[type==='inner'?'id':'parentId']===draggingNode.data.parentId;},drapNode (draggingNode, dropNode, dropType) { //只有当节点完成拖动时,dropType才是正确的拖动节点与目标节点的关系let list = this.$refs.tree.getNode(dropNode.data[dropType==='inner'?'id':'parentId']).data.children, index = list.findIndex(li => li.id===draggingNode.data.id); //list:完成拖动后的兄弟节点;index:拖动后是父节点的第几个子元素//....操作代码,成功后刷新树}}
}
</script>

http://www.dtcms.com/a/255445.html

相关文章:

  • linux pcie【7】- epf设备创建过程
  • Excel常用公式大全
  • 4.文件管理(文本、日志、Excel表)
  • 技术干货 | DAC静态参数计算全解析:从偏移误差到总未调整误差
  • 【Go语言基础】对齐边界与内存填充
  • davinci本地启动
  • Network Manager客户端制作小结
  • http2与websocket关系
  • NY339NY341美光固态闪存NW841NW843
  • RAG 升级之路:如何让问答机器人真正“智能”起来
  • 【网工】华为配置专题进阶篇④
  • 合并两个有序链表C++
  • Unity3D仿星露谷物语开发67之创建新的NPC
  • 变幻莫测:CoreData 中 Transformable 类型面面俱到(五)
  • 学习笔记丨AR≠VR:透视沉浸式技术的“虚实象限”法则
  • 【Golang面试题】Go语言实现请求频率限制
  • 记录:注册k8s cluster账号
  • NumPy玩转数据科学
  • Apollo:配置中心使用与介绍
  • C++11 Thread-Local Storage:从入门到精通
  • dify本地部署及添加ollama模型(ubuntu24.04)
  • Docker环境部署
  • Javaweb - 2 HTML
  • Windows 10 防火墙 0x8007045b 打不开
  • 数据库期末复习
  • AI是如何思考的,它的过程又是怎样
  • Python中布尔值在函数中的巧妙运用
  • 离线环境jenkins构建前端部署镜像
  • 数据库part2---子查询
  • GO Gin Web框架面试题及参考答案