vue elementui tree 任意级别拖拽功能代码


Posted in Javascript onAugust 31, 2020

我的是根据父级id做的一些判断

<el-tree
     draggable :allow-drop="allowDrop" @node-drop="sort"
     accordion style="font-size:14px;width:250px;"
     ref="tree" :data="catalogList" :props="defaultProps" :expand-on-click-node="false"
     node-key="id" :highlight-current="true" :load="loadNode"
     lazy :render-content="renderContent" @node-click="handleNodeClick"
     empty-text="暂无数据">
 
   allowDrop(draggingNode, dropNode, type){
   //注掉的是同级拖拽
   /* if (draggingNode.data.level === dropNode.data.level) {
    if (draggingNode.data.aboveId === dropNode.data.aboveId) {
     return type === 'prev' || type === 'next'
    }
   } else {
    // 不同级进行处理
    return false
   } */
   //任意级别拖拽
   if (draggingNode.data.aboveId === dropNode.data.aboveId) {
     return type === 'prev' || type === 'next'
   } else {
    return type === 'prev' || type === 'next' || type === 'inner'
   }
  },
  //拖拽完成之后要重新排序
  /* 
  * draggingNode:被拖拽节点对应的 Node
  * dropNode:结束拖拽时最后进入的节点
  * type: 被拖拽节点的放置位置(before、after、inner)
  * event
  */
  sort(draggingNode,dropNode,type,event) {
   console.log(draggingNode)
   console.log(dropNode)
   if (draggingNode.data.aboveId === dropNode.data.aboveId) {
    let obj = {
     aboveId:'',
     arr:[]
    }
    obj.aboveId = dropNode.data.aboveId
    for (let item of dropNode.parent.childNodes) {
     obj.arr.push(item.data.id)
    }
    console.log(obj)
    this.updateOrderMe(obj)
   } else {
    let obj = {
     aboveId:'',
     id:'',
     newAboveId:''
    }
    obj.aboveId = draggingNode.data.aboveId
    obj.id = draggingNode.data.id
    obj.newAboveId = dropNode.data.id
    this.randomDrag(obj)
   }
  },
  randomDrag(obj) {
   this.$http
    .post(url, obj).then(res =>{
	    if (!res.data.success) {
	     this.$message.warning(res.data.msg)
	    }
    })
  },
  updateOrderMe(obj) {
   this.$http
    .post(url, {
     aboveId:obj.aboveId,
     ids: obj.arr
    }).then(res =>{
	    if (!res.data.success) {
	     this.$message.warning(res.data.msg)
	    }
    })
  }

补充知识:element-ui tree 实现同级拖拽

我就废话不多说了,大家还是直接看代码吧~

<template>
 <div>
  <el-tree
   draggable
   :allow-drop="allowDrop"
   @node-drop="sort"
   ref="tree"
   :data="data2"
   :props="defaultProps"
   show-checkbox
   default-expand-all
   node-key="id"
   highlight-current
  ></el-tree>
 
  <div class="buttons">
   <el-button @click="getCheckedNodes">通过 node 获取</el-button>
   <el-button @click="getCheckedKeys">通过 key 获取</el-button>
   <el-button @click="setCheckedNodes">通过 node 设置</el-button>
   <el-button @click="setCheckedKeys">通过 key 设置</el-button>
   <el-button @click="resetChecked">清空</el-button>
  </div>
 </div>
</template>
 
<script>
// import draggable from "vuedraggable";
// import Sortable from "sortablejs";
export default {
 methods: {
  getCheckedNodes() {
   console.log(this.$refs.tree.getCheckedNodes());
  },
  getCheckedKeys() {
   console.log(this.$refs.tree.getCheckedKeys());
  },
  setCheckedNodes() {
   this.$refs.tree.setCheckedNodes([
    {
     id: 5,
     label: "二级 2-1"
    },
    {
     id: 9,
     label: "三级 1-1-1"
    }
   ]);
  },
  setCheckedKeys() {
   this.$refs.tree.setCheckedKeys([3]);
  },
  resetChecked() {
   this.$refs.tree.setCheckedKeys([]);
  }
 },
 mounted() {
  const el = document.querySelectorAll(".el-tree")[0];
  console.log(el);
 },
 data() {
  return {
   data2: [
    {
     id: 1,
     label: "一级 1",
     children: [
      {
       id: 4,
       label: "二级 1-1",
       prop: "4"
      }
     ]
    },
    {
     id: 2,
     label: "一级 2",
     children: [
      {
       id: 5,
       label: "二级 2-1",
       prop: "5"
      },
      {
       id: 6,
       label: "二级 2-2",
       prop: "6"
      }
     ]
    },
    {
     id: 3,
     label: "一级 3",
     children: [
      {
       id: 7,
       label: "二级 3-1",
       prop: "7"
      },
      {
       id: 8,
       label: "二级 3-2",
       prop: "9"
      }
     ]
    },
    {
     id: 9,
     label: "一级4"
    }
   ],
   defaultProps: {
    children: "children",
    label: "label"
   },
   allowDrop(draggingNode, dropNode, type) {
    if (draggingNode.level === dropNode.level) {
     if (draggingNode.parent.id === dropNode.parent.id) {
      // 向上拖拽 || 向下拖拽
      return type === "prev" || type === "next";
     }
    } else {
     // 不同级进行处理
     return false;
    }
   },
   sort(draggingNode, dropNode, type, event) {
    // console.log('排序')
    // console.log("<><><>>><><<><><><><><><><>")
    // 拖拽之后的重新组合的数组
    // console.log(dropNode.parent); //dropNode.parent.childNodes =[]
    let obj = {
     aboveId: "",
     arr: []
    };
    obj.aboveId = dropNode.data.aboveId;
    for (let item of dropNode.parent.childNodes) {
     obj.arr.push(item.data.id);
    }
   }
  };
 }
};
</script>

以上这篇vue elementui tree 任意级别拖拽功能代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
将jQuery应用于login页面的问题及解决
Oct 17 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 #Javascript
JS遍历树层级关系实现原理解析
Aug 31 #Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 #Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 #Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 #Javascript
vue中v-model对select的绑定操作
Aug 31 #Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 #Javascript
You might like
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
天游软件面试
2013/11/23 面试题
护士自我介绍信
2014/01/13 职场文书
毕业生应聘求职信
2014/07/10 职场文书
出纳岗位职责范本
2015/03/31 职场文书
公安机关起诉意见书
2015/05/20 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python