首页 > 其他分享 >el-tree只能同级拖拽排序

el-tree只能同级拖拽排序

时间:2022-08-25 15:27:22浏览次数:92  
标签:el draggingNode type tree dropNode data 拖拽

<el-tree
  :data="treeData"
  node-key="id"
  draggable
  :allow-drop="allowDrop"
  @node-drop="handleDrop"
> 
</el-tree>

主要是用到了allow-drop这个方法,然后去判断元素被放置的位置是否和当前元素的父级id一致

https://element.eleme.cn/#/zh-CN/component/tree

// tree拖拽成功完成时触发的事件
handleDrop(draggingNode, dropNode, dropType, ev) {
  console.log(draggingNode, dropNode, dropType, ev);
},

// 拖拽时判定目标节点能否被放置
// 'prev'、'inner' 和 'next',前、插入、后
allowDrop(draggingNode, dropNode, type) {
  if (draggingNode.data.level === dropNode.data.level) {
    if (draggingNode.data.parentId === dropNode.data.parentId) {
      return type === "prev" || type === "next";
    } else {
      return false;
    }
  } else {
    // 不同级进行处理
    return false;
  }
},

标签:el,draggingNode,type,tree,dropNode,data,拖拽
From: https://www.cnblogs.com/echohye/p/16624359.html

相关文章

  • 数据篇(MongoDB+ElasticSearch+Minio+TiDB+MySQL+Redis)
    一. 简介1. MongoDB  2. ElasticSearch  3. Minio   4. TiDB  5. MySQL   6. Redis         二. 目录  ......
  • element ui表单 对象 数组验证
     //表单参数   form:{    jobName:"",    jobNo:"",    produceList:[     {      orderNum:"", ......
  • Shell
    Shell单词的意思是外壳,在Unix里是操作系统内核的外壳,是用户和操作系统内核交互的中介。Shell是一个命令解释器,解释用户输入的命令,执行相关操作。Shell是一个程序,提供一个......
  • ubuntu查看系统使用内核版本-下载对应源码-国内kernel.org镜像
    查看系统Linux内核版:$apt-cachesearchlinux-source -   下载源码:$sudoapt-getinstalllinux-source-5.3.0 -  下载完成,到/usr/src目录查......
  • Error using mwltelibrary : License checkout failed. License Manager Error -5
    今天在matlabR2015bwin32上使用lte工具箱时,报了如下错误:Errorusingmwltelibrary:Licensecheckoutfailed.LicenseManagerError-5大概去网上查了查,是许可证的问......
  • el-table 高亮行:只有设置表格数据才生效
    需求:表格若有数据,则默认高亮第一行。之前高亮的行,若在查询结果列表中,则保持高亮不变;反之,则高亮第一行。解决办法需求1很容易实现:created(){//默认高亮第......
  • 通用导出excel服务
    1. 一般的后管在分页列表管理里都有导出功能我们的项目是先有分页管理,后面需求要求所有的分页再增加导出功用,所以后端采用统一导出的策略根据不同业务场景,多次调用对应......
  • vue集成elementUI
    vue集成elementUI1.使用npm安装elementui模块:指令:npm/cnpminstallelement-ui–S2.安装按需引入的插件:指令:npminstallbabel-plugin-component-D3.设置.babe......
  • Linux中的SELinux简单解释及如何禁用它
    简单理解SELinux是什么SELinux(SecurityEnhancedLinux为Linux提供了一种增强的安全机制,严格限制了用户进程主体(Subject)对服务器资源客体(Object)可以做的行为(Acti......
  • cf321 C. Ciel the Commander
    题意:用'A'~'Z'​给一棵树上的点染色,要求若两点字符相同则两点间的路径上一定有字符更小的点。思路:法一:点分治树的重心能把树划分成每块大小不超过\(n/2\)的连通块......