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 iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
javascript中this用法实例详解
Apr 06 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
React中的Context应用场景分析
Jun 11 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
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP实现蛇形矩阵,回环矩阵及数字螺旋矩阵的方法分析
2017/05/29 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Python标准库defaultdict模块使用示例
2015/04/28 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
解释一下钝化(Swap out)
2016/12/26 面试题
会计电算化专业个人的自我评价
2013/11/24 职场文书
六十大寿答谢词
2014/01/12 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
大学班干部竞选稿
2015/11/20 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python