html部分
数据部分
flattArray:[],
originalData:[],
tableData: [],
arr:[],
maps:new Map()我这里定义了四个字段和一个map，flattArray是平面数据，originalData字段也是平面数据（万一数据错误elementui列表拖拽，没有实际用处）tableData是表渲染的数据arr是异步请求的数据单击下拉菜单，Maps用于在tableData更改后重新渲染数据
方法部分
首先我定义了一种深拷贝的方式，这样当一个数据改变时，其他数据不会改变
//深拷贝
getNewObject(val) {
let resObj = JSON.stringify(val);
return JSON.parse(resObj);
},加载页面从socket获取tableData数据并深拷贝tableData
getDetails(id){
axios.get(url).then(res =>{
if(res.data.code === 0){
this.tableData = res.data.data
this.tableData.map( item =>{
item.hasChildren = true
delete item.children
})
this.flattArray = this.getNewObject(this.tableData)
this.originalData = this.getNewObject(this.tableData)
}else{
this.$message.error('网络错误');
}
}).catch(function (error) {
this.$message.error('网络错误');
});
},这里表格已经渲染出来了，因为需要异步获取下拉数据，所以请求element提供的下拉wave上的数据，在这里获取子关卡的数据，正式给出地图参数，借助递归，将数据展平，组装。
//点击下拉图标异步加载数据
load(tree, treeNode, resolve) {
this.maps.set(tree.id, { tree, treeNode, resolve })
axios.get(`url` + tree.id).then(res => {
if (res.data.code == 0) {
this.arr = res.data.data
this.arr.map(item => {
item.hasChildren = true
delete item.children
this.flattArray.push(item)
})
resolve(this.arr)
const tree = buildTree(this.flattArray, 1);
//组装tree
function buildTree(nodes, parent) {
const res = [];
for (let item of nodes) {
if (item.parentId === parent) {
const children = buildTree(nodes, item.id);
if (children.length) {
item.children = children;
}
res.push(item);
}
}
return res;
}
//平铺tree
let result = [];
function flatTree(nodes, parentId) {
if (!nodes || nodes.length === 0) return [];
nodes.forEach(node => {
result.push(node);
return flatTree(node.children, node.id);
});
}
flatTree(tree, 1);
this.originalData = result
this.getNewObject(this.originalData)
} else {
this.$message.error('没有更多消息了');
}
})
},定义的行拖拽方法，由于排序是按3个属性排序，所以需要考虑3种情况，一种是拖到最顶层，所以prev的值为空，另一种是拖到最底层，next为空elementui列表拖拽，第三级为正常拖动，nextprev不为空。
rowDrop() {
this.$nextTick(() => {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
animation: 300,
sort: true,
onEnd({
oldIndex,
newIndex,
item
}) {
const sourceObj = _this.originalData[oldIndex - 1] // 原本的位置
const targetObj = _this.originalData[newIndex - 1] // 移动到的位置
const frontObj = _this.originalData[newIndex - 2] //移动后位置的上一级
const behindObj = _this.originalData[newIndex] //移动后位置的下一级
if(sourceObj.parentId != targetObj.parentId) {
_this.$message.error("不支持跨级拖动,请拖回原来位置")
location.reload();
return;
}
let data = [];
if( oldIndex newIndex ){//向上移动
//上一级
let predata = null
if (frontObj != undefined && sourceObj.parentId == frontObj.parentId) {
predata = {
id: frontObj.id,
next: sourceObj.id,
prev: frontObj.prev
}
}
//自己
let curdata = {
id: sourceObj.id,
next: targetObj.id,
prev: targetObj.prev,
groupId: sourceObj.groupId
}
//下一级
let nextdata = {
id: targetObj.id,
next: targetObj.next,
prev: sourceObj.id
}
if(predata){
data.push(curdata, predata, nextdata)
}else{
data.push(curdata, nextdata)
}
_this.postdata(data, sourceObj.parentId)
}
}
})
})
},上面挂载方式要改线
mounted() {
this.rowDrop()
},最后去动态更新数据
refreshLoadTree(parentId) {
// 根据父级id取出对应节点数据
const {tree, treeNode, resolve} = this.maps.get(parentId)
this.$set(this.$refs.tableData.store.states.lazyTreeNodeMap, parentId, [])
if (tree) {
this.load(tree, treeNode, resolve)
}
},这里的需求已经实现了，所以没有深入挖掘，可能会出现问题。 不过时间太久了，我基本上都忘记了。 由于我要辞职了，我就把我写的要求整理一下。 如果有问题可以强调，大家一起学习学习
发表评论