由于代码量过大,我这里进行部分代码粘贴 可以好好研究官方文档的api,很有价值
官方api
<el-tree
:data="treeData"
ref="tree"
:key="tree_key"
node-key="id"
class="margin-top10"
@node-click="nodeClick"
:filter-node-method="filterNode"
:default-expanded-keys="defaultExpand"
empty-text="选定系统没有组织结构"
:render-content="renderContent"
draggable
:allow-drop="allowDrop"
@node-drop="sort"
></el-tree>
:allow-drop 开始拖拽
@node-drop 拖拽结束时的操作,包括 拖动的节点,结束时的节点,位置,event
我的数据在查询时都是安装sort字段进行排序,直接更改sort字段值即可。
若不存在排序字段,参考思路:将当前父节点下的所有新的排列好的数组更新到原来的数据库中,进行覆盖操作,也可以做一个批量修改,将当前拖拽的两个节点进行交换。
//节点拖拽
allowDrop(draggingNode, dropNode, type){
//非组织结点拖拽处理
if (draggingNode.data.type === 1) {
return false
}
//同一父节点下实现拖拽
if (draggingNode.data.parentId === dropNode.data.parentId) {
return type === 'prev' || type === 'next'
} else {
// 不同父节点处理
return false
}
},
//更新节点位置
sort(draggingNode,dropNode,type,event) {
draggingNode = draggingNode.data;
dropNode = dropNode.data;
// console.log("draggingNode",draggingNode)
// console.log("dropNode",dropNode)
// console.log("type",type)
//拖拽至节点上方
if (type === 'after') {
//当前结点已经为最低
if (draggingNode.sort === 1) {
return ;
}
let params = {
id :draggingNode.id,
sort : dropNode.sort - 1,
};
//sysOrgUpdate 为服务端接口
sysOrgUpdate(params).then(res => {
let _this = this;
if (res.code === 200) {
_this.$message({
type: "success",
message: "节点位置更新成功",
});
} else {
_this.$message({
type: "error",
message: res.message,
});
}
});
}
//拖拽至节点下方
if (type === 'before') {
//修改移动结点的sort为dropNode结点 sort+1
let params = {
id :draggingNode.id,
sort : dropNode.sort + 1,
};
sysOrgUpdate(params).then(res => {
let _this = this;
if (res.code === 200) {
_this.$message({
type: "success",
message: "节点位置更新成功",
});
} else {
_this.$message({
type: "error",
message: res.message,
});
}
});
}
},