树形拖拽功能封装

最新推荐文章于 2024-04-14 09:39:10 发布

黄不逗

最新推荐文章于 2024-04-14 09:39:10 发布

阅读量129

点赞数

分类专栏：常见的业务需求文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45172119/article/details/125137830

版权

常见的业务需求专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue应用中利用vuedraggable库实现树形拖拽功能，重点讨论了处理最后一级节点操作的难点，以及如何配置组件以支持多级子节点展开。通过递归组件和事件处理，提供了实例代码供读者参考。

摘要由CSDN通过智能技术生成

树形拖拽功能封装# 树形拖拽功能封装

效果：

在这里插入图片描述

使用的组件：

"vuedraggable": "^4.1.0",
地址：https://github.com/SortableJS/Vue.Draggable

思想：组件进行递归

难点：点击最后一个的时候，左侧线条的计算，关闭最底层，再展开最外层，线条的计算

使用方法：

<BasicDraggable @click-action="clickAction" @click="handleClick" v-bind="draggableSetting" @ok="end">
            </BasicDraggable>
            
   // 拖拽组件配置
    let draggableSetting = reactive({
      canDrag: !getIsAuth('排序'),
      list: [],
      choiceId: 0,
      openMultiChildren: true,
      actions: Actions,
    });

可选配置：

export interface basicPropsType {
    list?: Array<any>,
    filed?: string,
    rowKey?: string,
    childrenField?: string,
    actions?: Array<any>,
    openMultiChildren?: boolean,
    canDrag?: Function | boolean,
    showMoreFn?: Function | boolean,
    onlyDragIcon?: boolean,
    dragTips?: string,
    isTree?: boolean,
    parentId?: number | string,
    showItemId?: boolean,
    canClickParent?: boolean,
    openFirstItem?: boolean,
    canClick?: boolean
}