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

前言

随着前端技术的不断发展，越来越多的网站和应用需要使用树形控件来展示数据，而上下拖拽则是一个非常实用的交互方式。如果你正在寻找一种简单易用的树形控件实现上下拖拽的方法，那么本文将为你提供最佳解决方案。本文将介绍如何使用 vue 基于 element 树形控件实现上下拖拽，并且还会提供详细的代码实现和示例，帮助你快速掌握这个技术。让我们一起来探索这个令人兴奋的前端技术吧！

---

实现思路

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

---

属性参数和事件方法

props

---

同级拖拽排序

源码如下

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

---

可跨级拖拽排序

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

// 拖拽时触发
dropAllow(draggingNode, dropNode, type) {
  if (draggingNode.data.id === dropNode.data.id) {
    return type === "prev" || type === "next";
  } else {
    return type === "prev" || type === "next" || type === "inner";
  }
},
1
2
3
4
5
6
7
8

---

相关推荐

⭐ 用vue和sortableJS轻松实现表格拖拽排序
⭐ 教你一招，element表格行轻松上下移动