ElementUI el-tree實現節點拖拽功能
阿新 • • 發佈:2021-10-26
el-tree
程式碼,主要加入了draggable
屬性和node-drop
和handleDragEnd
事件
<el-tree node-key="id" default-expand-all :data="collectionList" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" highlight-current ref="tree" style="margin-top: 10px" @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop">
handleDrop
事件程式碼
// 拖拽事件 引數依次為:被拖拽節點對應的 Node、結束拖拽時最後進入的節點、被拖拽節點的放置位置(before、after、inner)、event handleDrop: async function(draggingNode, dropNode, dropType, ev) { var paramData = []; // 當拖拽型別不為inner,說明只是同級或者跨級排序,只需要尋找目標節點的父ID,獲取其物件以及所有的子節點,併為子節點設定當前物件的ID為父ID即可 // 當拖拽型別為inner,說明拖拽節點成為了目標節點的子節點,只需要獲取目標節點物件即可 var data = dropType != "inner" ? dropNode.parent.data : dropNode.data; var nodeData = dropNode.level == 1 && dropType != "inner" ? data : data.children; // 設定父ID,當level為1說明在第一級,pid為0 nodeData.forEach(element => { element.pid = dropNode.level == 1 ? 0 : data.id; }); nodeData.forEach((element, i) => { var collection = { collectionId: element.id, parentId: element.pid, sort: i+1 }; paramData.push(collection); }); this.loading = true; updateCollection(JSON.stringify(paramData)).then(response => { this.msgSuccess("排序成功"); this.loading = false; }); },
後端接收前端傳入的陣列資料批量修改即可
本文來自部落格園,作者:胡圖人,轉載請註明原文連結:https://www.cnblogs.com/huturen/p/15466187.html