测开笔记-elemntUI Tree树节点上下移操作

问题

最近有这样的需求,需要对elementUI Tree树节点做某些操作,比如编辑、删除、上移或下移操作,并且需要在节点后展示,官网中,没有好的直接实现方式,所以就自己弄弄。

实现功能
  • 点击某节点,出现操作图标,默认不出现的

  • 点击操作图标,实现具体操作,比如:上下移动功能

  • 第一节点不能出现上移图标,最后节点不能出现下移图标

难点

上下移动操作,肯定需要找到两个节点数据,再传给服务端,拿当前节点好获取,但上一节点或下一节点呢。

实现

代码

html部分

<el-tree class="filter-tree" :data="data2" accordion  
:highlight-current=true   
:draggable=true   
:props="defaultProps"   
:default-expand-all=false   
:check-on-click-node=true   
:filter-node-method="filterNode"   
@node-click="nodeClick" ref="tree2">  
   <span class="custom-tree-node" slot-scope="{ node, data }">  
      <span>{{ node.label }}</span>  
        <!-- 1、 节点被选中后才展示-->  
        <span v-if='node.isCurrent == true && node.level == 1' class="el-tree-span">  
          <i class="el-icon-delete el-tree-i" @click="deleteGroup(node, data)"> </i>  
            <!-- 2、通过类型判断是上移还是下移,传入当前节点数据 -->  
          <i v-if='node.previousSibling !== null' class="el-icon-top el-tree-i" @click="moveGroup('up',node, data)"> </i>  
              <!-- 3、通过v-if -->  
          <i v-if='node.nextSibling !== null && node.nextSibling !== undefined ' class="el-icon-bottom" @click="moveGroup('down',node, data)"> </i>  
        </span>  
    </span>  
 </el-tree>

js部分

   //节点移动  
    moveGroup (type, node, data) {  
      var self = this;  
      let frontId = ''  
      let afterId = ''  
      if (type == 'up') {  
        afterId = node.previousSibling.data.id  
        frontId = node.data.id  
      } else if (type == 'down') {  
        frontId = node.nextSibling.data.id  
        afterId = node.data.id  
      }  
      this.$post("http://" + self.$serviceNew + "/projectGroup/move", {  
        frontId: frontId,  
        afterId: afterId  
      }).then(function (resp) {  
        self.$message({  
           message: resp.message,  
           type: "success"  
         });  
        self.getProjectGroup(self.ProjectGroupForm.projectId);  
      }).catch(function (error) {  
        self.$message({  
          message: "请求异常!",  
          type: "error"  
        });  
      });  
    },

null

1、源码中第一步,首先实现在做点击操作时,自动展示操作图标

树组件中,判断某节点是否选中时有个属性叫 isCurrent,表示当前节点是否选择,那么如果选中了我们就展示操作图标。

并且由于我们分组中只管一级节点,所以加了个节点等级为一级才展示。

2、源码中第二步,实现具体移动操作

通过类型判断是上移还是下移,传入当前节点数据,节点中有个属性叫previousSibling和*nextSibling*,花费了好半天才找到竟然还有这样的属性,他表示该节点的前一节点和后一节点,这样的话就好做了,通过这两个属性就可以拿到前一节点数据和后一节点中数据。

moveGroup方法中可以看出我们拿到两个节点的id值,这也是服务端返回的,传给服务端,让服务端去做移动操作,然后在刷新下tree节点。

3、源码中第三步,实现第一节点不能出现上移图标,最后节点不能出现下移图标

通过v-if判断,如果当前节点的前一节点 **previousSibling **为空,就表示该节点在最上边,就不需要展示上移图标,如果当前节点的后一节点 *****nextSibling*** **为空,就表示该节点在最下边,就不需要展示下移图标。

实现效果

null

服务端接口

服务端实现其实就是数据库中有个 排序的字段ordercode,我们针对这个字段来变换他的值,达到更换顺序功能

   @PostMapping("/move")  
    @ResponseBody  
    public ResultBean<Object> ReplacementSteps(@RequestParam("frontId") Integer frontId, @RequestParam("afterId") Integer afterId){  
        try {  
            logger.info("/projectGroup/move POST 方法被调用!!");  
            if (null != frontId && null != afterId) {  
                ProjectGroupBean frontBean = projectGroupBll.getProjectGroupById(frontId);  
                ProjectGroupBean afterIdBean = projectGroupBll.getProjectGroupById(afterId);  
                if(frontBean != null && afterIdBean != null){  
                    Integer id = frontBean.getOrderCode();  
                    frontBean.setOrderCode(afterIdBean.getOrderCode());  
                    afterIdBean.setOrderCode(id);  
                    if(projectGroupBll.update(frontBean) && projectGroupBll.update(afterIdBean)){  
                        return ResultBean.success("移动分组成功!!");  
                    }  
                }else{  
                    return ResultBean.success("移动的分组不存在!");  
                }  
            }  
            else {  
                return ResultBean.success("移动的分组编号不能为空!");  
            }  
            return null;  
        } catch (Exception e) {  
            logger.error("切换用例步骤异常:{" + e + "}");  
            return ResultBean.failed("切换用例步骤异常!",e.getMessage());  
        }  
    }

总结

  • 关键点就是我们通过previousSibling和nextSibling 很方便拿到同级节点的前一个和后一个节点数据。

  • 不好的地方没能实现鼠标放上去就出现图标,而是需要点击。