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画图之点、线、面
Jan 12 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
微信小程序 设置启动页面的两种方法
Mar 09 Javascript
Require.JS中的几种define定义方式示例
Jun 01 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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
header()函数使用说明
2006/11/23 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
js模拟弹出效果代码修正版
2008/08/07 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
python实现超简单端口转发的方法
2015/03/13 Python
python概率计算器实例分析
2015/03/25 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
十佳教师事迹材料
2014/01/11 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
建筑安全生产责任书
2014/07/22 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
期末复习计划
2015/01/19 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server