Ztree is a new version of el-Tree, but it is not a new version of El-Tree. It is a new version of El-Tree. Since the two tables have similar structure, the core of the two tables are still the same as the fields ID, PID and ORDER. In principle, the least modification of the data is the priority

First of all, our Vue file declaration is as follows (due to the file content, only paste key code), mainly added draggable attribute and Node-drop event, support drag and drop

<el-tree
  :data="deptTree"
  :props="defaultProps"
  :expand-on-click-node="false"
  :filter-node-method="filterNode"
  highlight-current
  node-key="id"
  ref="tree"
  default-expand-all
  @node-click="handleNodeClick"
  @node-drop="handleDrop"
  draggable
>
Copy the code

Add the handleDrop method to Vue Mounted. After analyzing the data structure of draggingNode and dropNode for several times, you can find that the handleDrop method is different from Ztree

  • The level rule of an El-tree is different from that of a Ztree. In a Ztree, the level of the first level visible to the naked eye is 0, whereas in an El-tree, the level of the first level is 1
  • The penart of the first level of the ztree is null, and the first level of the el-tree can also be advanced to get a node with level 0
  • Ztree’s source node will automatically change its pId and parentTid after being dragged. This is ztree’s own pId, not our own pId. Our own pId will remain unchanged after being dragged, and the original parent node will remain the same.

The specific implementation is as follows, and the specific implementation idea is indicated in the notes:

	// Drag event parameters are: the Node corresponding to the dragged Node, the last Node to enter when the drag ends, the position of the dragged Node (before, after, inner), and event
	handleDrop: async function(draggingNode, dropNode, dropType, ev) {
		  var paramData = [];
		  // If the drag type is not inner, it is a hierarchical or cross-hierarchical sort. Just look for the parent ID of the target node, get its object and all its children, and set the current object ID to the parent ID of the children
		  // When the drag type is inner, the drag node becomes a child node of the target node
		  vardata = dropType ! ="inner" ? dropNode.parent.data : dropNode.data;
		  var nodeData = dropNode.level == 1&& dropType ! ="inner" ? data : data.children;
		  // Set the parent ID. If level is 1, pid is null at the first level
		  nodeData.forEach(element= > {
		    element.pid = dropNode.level == 1 ? "" : data.id;
		  });
		  nodeData.forEach((element, i) = > {
		    var dept = {
		      deptId: element.id,
		      parentDeptId: element.pid,
		      order: i
		    };
		    paramData.push(dept);
		  });
		
		  this.loading = true;
		  // Get the data range that needs to be changed for this operation.
		  DeptAPI.updateDeptTreeOrder(JSON.stringify(paramData)).then(res= > {
		    console.log(res);
		    // Add a message box
		    this.loading = false;
		  });
	},
Copy the code

Post DeptAPI as well, it’s the dept.js file I introduced

/** ** @param {*} data */
const updateDeptTreeOrder = data= > {
  return request({
    url: '... '.method: "POST".headers: {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    data: data
  })
}
export default {
  updateDeptTreeOrder
};
Copy the code

The back-end Controller layer uses @RequestBody to receive List

objects. See SpringBoot receiving List< Bean > parameters (POST request).

Note that the content-type of axios needs to be set to application/json. charset=UTF-8