基于VUE+elementUI Tree树节点上移下移操作

一.使用方法
首先,获取当前节点数据 this.$refs.tree.getCurrentNode();

其次,a>获取该节点的父节点的所有子节点数组this.$refs.tree.parent.childNodes;
b>遍历所有子节点,得到当前节点的在子节点数组中的索引,
上移:当前节点的上一个节点索引(index-1);
下移:当前节点的下一个节点索引(index+1);

最后,访问后台数据,传入两个节点id,调换顺序,刷新数据。
二.具体实现代码

 //节点上移
      upDept: function () {
        let node = this.$refs.tree.getCurrentNode();
        console.log(node.id);
        if (node.id == '0') {
          this.$message({
            message: '不允许删除根节点',
            type: 'warning'
          });
        } else {
          let pchildNodes = this.$refs.tree.getNode(node.id).parent.childNodes;
          let currentId = {};
          for (let i = 0; i < pchildNodes.length; i++) {
            if (pchildNodes[i].data.id == node.id) {
             currentId=i;
            }
          }
          if(currentId==0){
            this.$message({
              message: '处于顶端,不能继续上移',
              type: 'warning'
            });
          }
          let upid = currentId-1;
          console.log(upid);
          let param = {};
          param.id1 = node.id;//当前节点id
          param.id2 =pchildNodes[upid].data.id;//上一个节点id
          this.$http.get('/', {params: param}).then(function (res) {
            this.$message({
              message: '上调成功',
              type: 'success'
            });
     //刷新数据操作
            this.loadTree(this.$refs.tree.getNode(node.pid), null, node.id);
          }, function () {
            console.log('请求失败处理');
          });
        }
      },
Logo

前往低代码交流专区

更多推荐