vue elementui tree 任意級別拖拽功能程式碼
阿新 • • 發佈:2020-09-01
我的是根據父級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,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" } ] },label: "一級4" } ],defaultProps: { children: "children",label: "label" },allowDrop(draggingNode,type) { if (draggingNode.level === dropNode.level) { if (draggingNode.parent.id === dropNode.parent.id) { // 向上拖拽 || 向下拖拽 return type === "prev" || type === "next"; } } else { // 不同級進行處理 return false; } },sort(draggingNode,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 任意級別拖拽功能程式碼就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。