接上篇:el-tree同级节点顺序调整
上一篇写的,实践场景在同节点,同节点下的节点没有适配;此篇适配子节点和 同级节点的顺序调整
因为我的树节点排序是1,2,3,包括子节点下的数据排序,也是按照1,2,3排序的,不是按照1-1,1-2,1-1-1这样排的。
参考代码如下:
//上移
moveUp(node, data, num) {
const nums = num.split('-')
const seqNum = Number(nums[nums.length - 1])
const childrenList = node?.parent?.data?.children
// seqNum 这个值去判断
if (seqNum == 1) {
return this.$message.warning('不可以上移')
}
const targetIndex = childrenList.findIndex(item => item.seq_num == num)
if (targetIndex !== -1) {
const parentData = node?.parent?.data
this.moveUpItemSeqNum(childrenList, Number(targetIndex), parentData) // 将第三项移动到第一位
}
},
moveUpItemSeqNum(list, index, parentData) {
const temp = list[index]
list[index] = list[index - 1]
list[index - 1 ] = temp
let numStr = ''
const seqNum = list[0].seq_num
if (seqNum.indexOf('-') > -1) {
numStr = seqNum.substring(0, seqNum.lastIndexOf('-') + 1)
}
for (let i = index - 1; i <= index; i++) {
if (numStr) {
list[i].seq_num = numStr + (i + 1)
} else {
list[i].seq_num = (i + 1) + ''
}
}
this.$nextTick(() => {
this.updateTreeData(parentData.id, list, this.treeData)
})
},
//下移
moveDown(node, data, num) {
const nums = num.split('-')
const seqNum = Number(nums[nums.length - 1])
const childrenLength = node.parent.data.children.length
const childrenList = node?.parent?.data?.children
// seqNum 这个值去判断
if (childrenLength == seqNum) {
return this.$message.warning('不可以下移')
}
const targetIndex = childrenList.findIndex(item => item.seq_num == num)
if (targetIndex !== -1) {
const parentData = node?.parent?.data
this.moveItemAndUpdateSeqNum(childrenList, Number(targetIndex), parentData) // 将第三项移动到第一位
}
},
moveItemAndUpdateSeqNum(list, index, parentData) {
const temp = list[index]
list[index] = list[index + 1]
list[index + 1 ] = temp
let numStr = ''
const seqNum = list[0].seq_num
//这里不用管,原来的数据是 1-1,1-1-1 这种,所以加了这个判断,写上也没有关系,不会影响结果
if (seqNum.indexOf('-') > -1) {
numStr = seqNum.substring(0, seqNum.lastIndexOf('-') + 1)
}
for (let i = index; i <= index + 1; i++) {
if (numStr) {
list[i].seq_num = numStr + (i + 1)
} else {
list[i].seq_num = (i + 1) + ''
}
}
this.$nextTick(() => {
this.updateTreeData(parentData.id, list, this.treeData)
})
},
updateTreeData(id, list, treeData) {
treeData.forEach(item => {
if (item.id === id) {
item.children = list
this.$refs.tree.root.setData(this.treeData)
} else if (item.children && item.children.length > 0) {
this.updateTreeData(id, list, item.children)
}
})
},