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

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

<el-tree draggable :allow-drop='allowDrop' @node-drop='sort' accordion 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 任意级别拖拽功能代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。