当前位置: 首页 > 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.lqws.cn/news/452665.html

相关文章:

  • 内存的代价:如何正确与 WASM 模块传值交互
  • 大内存对电脑性能有哪些提升
  • Docker容器常用命令汇总
  • 游戏架构中的第三方SDK集成艺术:构建安全高效的接入体系
  • 16、Redis底层数据结构
  • 网站如何启用HTTPS访问?本地内网部署的https网站怎么在外网打开?
  • FPGA--hello
  • http通信测试,模拟客户端
  • 【动手学深度学习】4.5. 权重衰减
  • Hollywood: The World’s Most Effective Propaganda System
  • 【云创智城】YunCharge充电桩系统源码实现云快充协议深度解析与Java技术实践:打造高效充电桩运营系统
  • Selenium自动化测试全解
  • opencv依据图像类型读取图像像素点
  • 【PyTorch】请问,Reproducibility中的‘:4096:8‘是什么呀?
  • 20250620-Pandas.cut
  • aws(学习笔记第四十五课) route53-failover
  • 文件夹美化工具推荐,打造个性化电脑界面
  • 【网工】华为配置专题进阶篇④
  • 学习华为 ensp 的学习心得体会
  • 10分钟撸出高性能网络服务:吃透高性能优化:缓存_锁_系统调用_编译
  • 汽车整车厂如何用数字孪生系统打造“透明车间”
  • 【React】React CSS 样式设置全攻略
  • DAY 37 早停策略和模型权重的保存
  • RPGMZ游戏引擎 如何手动控制文字显示速度
  • 机器翻译与跨语言学习数据集综述
  • 情感大模型
  • “地标界爱马仕”再拓疆域:世酒中菜联袂赤水金钗石斛定义中国GI
  • vue3 reactive重新赋值
  • QEMU学习之路(10)— RISCV64 virt 使用Ubuntu启动
  • Linux故障排查与性能优化实战经验