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 相关文章推荐
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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中的正规表达式(一)
2006/10/09 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
webpack下实现动态引入文件方法
2018/02/22 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
详解【python】str与json类型转换
2019/04/29 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python如何爬取网页中的文字
2020/07/28 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
外包公司软件测试工程师
2014/11/01 面试题
质检部岗位职责
2013/11/11 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript