el-tree调整上下节点顺序(节点下节点的顺序调整)

接上篇: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)
        }
      })
    },

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值