vue基于element树形控件实现上下拖拽

Posted 2022-12-01 水星记_

前言

树形控件能够用清晰的层级结构关系展示信息。通过树形控件你可以控制系统的菜单，但如果想要修改菜单的顺序，就需要修改数据库来调整，显然是很麻烦的，所以就需要我们实现树形控件之间上下的拖拽排序。

---

实现思路

树形控件拖拽又分为两种：同级拖拽排序、可跨级拖拽排序。其实不论是同级还是跨级都离不开一个核心的属性：draggable 属性。通过将树形控件设置 draggable 属性即可让节点变为可拖拽。以下是本章用到的属性参数和事件方法。

---

属性参数和事件方法

参数	说明	默认值	回调参数
allow-drop	拖拽时判定目标节点能否被放置。type 参数：‘prev’、‘inner’ 和 ‘next’，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后	-	-
draggable	是否开启拖拽节点功能	false	-
node-drop(事件方法)	拖拽成功完成时触发的事件	-	共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event
show-checkbox	节点是否可被选择	false	-
default-expand-all	是否默认展开所有节点	false	-
node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	-	-
highlight-current	是否高亮当前选中节点	false	-

props

参数	说明	类型
label	指定节点标签为节点对象的某个属性值	string, function(data, node)
children	指定子树为节点对象的某个属性值	string
disabled	指定节点选择框是否禁用为节点对象的某个属性值	boolean, function(data, node)
isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效	boolean, function(data, node)

---

同级拖拽排序

源码如下

<template>
  <div>
    <!-- 树形组件 -->
    <el-tree draggable :allow-drop="dropAllow" @node-drop="dragSuccess" ref="tree" :data="dataList" :props="defaultProps" show-checkbox
      default-expand-all node-key="id" highlight-current></el-tree>
  </div>
</template>
 
<script>
export default 
  data() 
    return 
      // 模拟数据
      dataList: [
        
          id: 1,
          label: "一级菜单",
          children: [
            
              id: 5,
              label: "1-1",
            ,
          ],
        ,
        
          id: 2,
          label: "二级菜单",
          children: [
            
              id: 6,
              label: "2-1",
            ,
            
              id: 7,
              label: "2-2",
            ,
          ],
        ,
        
          id: 3,
          label: "三级菜单",
          children: [
            
              id: 8,
              label: "3-1",
            ,
            
              id: 9,
              label: "3-2",
            ,
          ],
        ,
        
          id: 4,
          label: "四级菜单",
        ,
      ],
      defaultProps: 
        label: "label", //指定节点标签为节点对象的某个属性值
        children: "children", //指定子树为节点对象的某个属性值
      ,
    ;
  ,
  methods: 
    // 拖拽时触发
    dropAllow(draggingNode, dropNode, type) 
      if (draggingNode.level === dropNode.level) 
        if (draggingNode.parent.id === dropNode.parent.id) 
          // 向上拖拽 || 向下拖拽
          return type === "prev" || type === "next";
        
       else 
        return false;
      
    ,
    // 拖拽成功时触发
    dragSuccess(draggingNode, dropNode, type, event) 
      this.$message(
        message: "成功",
        type: "success",
      );
      console.log(draggingNode, dropNode, type, event);
      // 请求接口传参即可
    ,
  ,
;
</script>

---

可跨级拖拽排序

可跨级拖拽说白了就是将限制放开，我们只需要在拖拽时判定目标节点能否被放置的方法中稍加修改即可，代码如下。

// 拖拽时触发
dropAllow(draggingNode, dropNode, type) 
  if (draggingNode.data.id === dropNode.data.id) 
    return type === "prev" || type === "next";
   else 
    return type === "prev" || type === "next" || type === "inner";
  
,

---

拓展

有关于 element 中表格（el-table）如何实现拖动效果，大家可移步博主另一篇文章（vue基于SortableJS实现表格拖动排序）