element树形控件拖拽后怎样获取所有值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element树形控件拖拽后怎样获取所有值相关的知识,希望对你有一定的参考价值。

参考技术A 拖拽后,树的treeData的结构也跟着改变了的,无须再去修改。如果里面有参数要修改的话用递归的方式处理一下就行了

dealtreeData(treeData, parent_id)
treeData.forEach((item) =>
if (
parent_id !== null &&
parent_id !== "" &&
typeof parent_id !== "undefined"
)
item.parent_id = parent_id;

if (item.children && item.children.length > 0)
this.dealtreeData(item.children, item.id);

);
,
// 树拖动
onDrop()
//修改节点的parent_id
this.dealtreeData(this.treeData, 0);
,

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

前言

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


实现思路

树形控件拖拽又分为两种:同级拖拽排序可跨级拖拽排序。其实不论是同级还是跨级都离不开一个核心的属性: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实现表格拖动排序)

以上是关于element树形控件拖拽后怎样获取所有值的主要内容,如果未能解决你的问题,请参考以下文章

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

使用Sortable.js,ul嵌套3层,树形结构,有个问题是能拖拽出自己当前的容器

百度地图画圈,拖拽后获取点的坐标

需要拖拽进PS里的图片变成新打开了一个文件,不是拖拽后,变成新图层呢?pscs6

在C#中如何获取树形控件勾选框选中的value值

vue-cli+element的树形控件获取选中节点的数据