vue-project-tree vue3 树形结构展示组件

GitHub:vue-project-tree by one-ccs
Gitee:vue-project-tree by one-ccs
遵循 MIT 开源协议

文章目录

  • vue-project-tree
    • 一、使用
    • 二、API
      • 1、属性
      • 2、事件
      • 3、方法
      • 4、插槽

vue-project-tree

使用 Vue3 + TS 实现的树形结构展示组件,有拖拽、排序、自定义图标等功能

在这里插入图片描述
在这里插入图片描述

一、使用

  1. 安装

npm install vue-project-tree -S

  1. 导入

import VueProjectTree from "vue-project-tree";

  1. 使用
import { ref } from 'vue';
import VueProjectTree from "vue-project-tree";interface TreeNode {id: number;label: string;children?: TreeNode[];
};const data = ref<TreeNode[]>([{id: 1,label: "1 不允许拖拽",children: [{id: 2,label: "2",children: [{id: 3,label: "3"},{id: 4,label: "4"},]},{id: 5,label: "5",},],},{id: 6,label: "6 不允许拖拽",},{id: 7,label: "7 不允许拖拽、放下",},
]);
<vue-project-tree :data="data"></vue-project-tree>

二、API

1、属性

名称说明类型默认值
data树形数据,最外层必须是数组Array
idKey?主键属性名(值在树中必须唯一)string“id”
labelKey?标签属性名string“label”
childrenKey?子节点数组属性名string“children”
indent?左侧缩进值number | string24
nodeHeight?节点高度number | string35
expandIconSize?展开图标大小number | string10
nodeIcon?是否显示节点图标booleanfalse
nodeIconSize?节点图标大小number | string20
filterMethod?过滤方法(需手动调用 filter 函数执行过滤)Function() => true
draggable?是否允许拖拽booleanfalse
sortable?是否允许排序booleanfalse
allowDrag?节点是否拖拽放下处理函数(返回 true 表示允许拖拽)Function() => false
allowDrop?节点是否允许放下处理函数(返回 true 表示允许放下)Function() => false

2、事件

事件名说明回调参数
nodeClick节点点击事件(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
nodeRightClick节点右键点击事件(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
currentNodeChange当前节点改变事件(data: any) 节点数据
start拖拽开始事件(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
enter拖拽进入事件(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
over拖拽进入后在节点内持续触发(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
leave拖拽离开事件(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
dropped节点放下事件(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素
droppedBefore放在节点前事件(dragData: any, dropData: any, index: number) 分别为拖拽节点数据,放下节点数据,移动后节点索引
droppedIn放在节点内事件(dragData: any, dropData: any, index: number) 分别为拖拽节点数据,放下节点数据,移动后节点索引
droppedAfter放在节点后事件(dragData: any, dropData: any, index: number) 分别为拖拽节点数据,放下节点数据,移动后节点索引
end拖拽结束事件(event: DragEvent, data: any, nodeElement: HTMLElement) 分别为事件数据,节点数据,节点元素

3、方法

方法描述参数返回值
getMultipleList获取选择节点的 data 数据
clearMultipleList清除选择节点
getMoveList获取多选列表,多选列表为空时返回元素为当前节点数据的列表
filter执行过滤接受一个参数并指定为 filter-method 的第一个参数
setCurrentNode设置当前选中节点的数据(data: any) 节点数据
getCurrentNode获取当前选中节点的数据
findNodeById通过节点主键值查找节点数据(id: any, data?: any[]) 分别为节点主键值,(可选)查找的节点数据
findParentById通过节点主键值查找父节点数据,没有则返回 null(id: any, data?: any[]) 分别为节点主键值,(可选)查找的节点数据
safeFindParentById通过节点主键值查找父节点数据,没有则返回 children 为根列表的节点数据(id: any) 节点主键值
moveBefore移动到节点前(dragData: any, dropData: any) 分别为拖拽节点数据,放下节点数据移动后的节点索引
moveIn移动到节点内(dragData: any, dropData: any) 分别为拖拽节点数据,放下节点数据移动后的节点索引
moveAfter移动到节点后(dragData: any, dropData: any) 分别为拖拽节点数据,放下节点数据移动后的节点索引

4、插槽

插槽名说明
nodeIcon自定义展开图标{ data, size } 分别为节点数据,展开图标大小
nodeIcon自定义节点图标{ data, size } 分别为节点数据,节点图标大小

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/828608.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器数据恢复—StorNext文件系统下raid5阵列数据恢复案例

服务器数据恢复环境&#xff1a; 昆腾某型号存储&#xff0c;8个存放数据的存储柜1个存放元数据的存储柜。 元数据存储&#xff1a;8组RAID1阵列1组RAID10阵列4个全局热备硬盘。 数据存储&#xff1a;32组RAID5阵列&#xff0c;划分2个存储系统。 服务器故障&#xff1a; 数据…

【c++】weak_ptr和观察者模式

weak_ptr 的使用 #include <array> #include <memory>class A {// 类A的定义 };int main() {std

《QT实用小工具·四十一》无边框窗口

1、概述 源码放在文章末尾 该项目实现了无边框窗口效果&#xff0c;项目demo如下所示&#xff1a; 项目代码如下所示&#xff1a; #include "framelesswindow.h" #include <QGuiApplication> #include <QScreen>#ifdef Q_OS_WIN #include <window…

单例设计模式c++

什么是单例模式&#xff1f; 单例模式指在整个系统生命周期里&#xff0c;保证一个类只能产生一个实例&#xff0c;确保该类的唯一性。 单例模式分类 单例模式可以分为懒汉式和饿汉式&#xff0c;两者之间的区别在于创建实例的时间不同&#xff1a; 懒汉式&#xff1a;指系…

Mac 安装Nodejs

Nodejs介绍 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。 Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境&#xff0c;基于 Google 的 V8 引擎&#xff0c;V8 引擎执行 Javascript 的速度非常快&am…

带你走进不一样的策略模式

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 带你走进不一样的策略模式 前言策略模式简介概念解释 策略模式的结构策略模式优点项目实践之bean策略构思业务策略实现策略接口实现策略上下文业务实现 前言 在编程的世界里&#xff0c;每一次按键都…

刷代码随想录有感(46):平衡二叉树

这道题给我的教训&#xff1a;别轻视递归。 题干&#xff1a; 代码&#xff1a; int geiHeight(TreeNode* node){if(node NULL)return 0;int leftHeight getHeight(node -> left);if(leftHeight -1) return -1;int rightHeight getHeight(node -> right);if(rightH…

计算机网络基础认识

本篇文章是我在B站上看到关于计算机网络的介绍视频收到的启发。本篇文章的内容来自【网络】半小时看懂<计算机网络>_哔哩哔哩_bilibili 一、物理层 从常理来说&#xff0c;进行连个设备之间的通讯&#xff0c;首先最容易想到的就是使用一根线连接两个设备进行通讯。但是…

redolog、undolog和binlog日志文件详解

redolog、undolog和binlog日志文件详解 前言redolog设计目标记录内容写入策略 undolog设计目标记录内容写入策略 binlog设计目标记录内容写入策略 小结 前言 当谈论MySQL数据库的日志文件时&#xff0c;通常会涉及到三种主要类型&#xff1a;redo log&#xff08;重做日志&…

java8 LocalDateTime

LocalDateTime java8使用了LocalDateTime和DateTimeFormatter。比之前的Date和Carlendar有所改进。 DateTimeFormatter是线程安全的。DateTimeFormatter中很多属性使用了final修饰。 LocalDate: 只能设置仅含年月日的格式&#xff0c;表示没有时区的日期, LocalDate是不可变并…

ansible安装教程

一、启动系统前&#xff0c;加一块光驱&#xff0c;把安装镜像文件放到光驱中 二、配置Yum文件 [rootlocalhost ~]# cd /etc/yum.repos.d/ [rootlocalhost yum.repos.d]# rm -f * [rootlocalhost yum.repos.d]# vi cdrom.repo [BaseOS] nameBaseOS baseurlfile:///media/BaseO…

【MAC】删除自带的输入法

问题描述 平常使用mac办公&#xff0c;经常会非预期切换到自带的ABC输入法&#xff0c;令人很困惑。 解决方案&#xff1a; 1、下载PlistEdit Pro 链接&#xff1a;https://www.fatcatsoftware.com/plisteditpro/ 2、执行命令 sudo open ~/Library/Preferences/com.apple.…

GEE案例——美国夏威夷火灾森林面积损毁程度分析

简介 本次案例的主要目的是通过查看两期影像间的差异来识别火灾的影像范围,所以这里用到了高清的sentinel-2影像,同时应用到了sentinel-2的QA高质量的去云后的影像进行分析。 数据 Cloud Score+ S2_HARMONIZED V1 Cloud Score+ 是一种用于中高分辨率光学卫星图像的质量评…

手把手教会你做属于自己的网站《保姆级教程》

手把手教会你做属于自己的网站《保姆级教程》 前言开始教程特别说明下期内容预报 前言 什么是个人网站&#xff1f; 个人网站是指因特网上一块固定的面向全世界发布消息的地方&#xff0c;通常由域名&#xff08;也就是网站地址&#xff09;、程序和网站空间构成&#xff0c;并…

TCP协议的状态码详解

TCP状态码是用来表示TCP连接过程中不同阶段的一种标识。以下是一些常见的TCP状态&#xff1a; 1. CLOSED&#xff1a;初始状态&#xff0c;表示TCP连接是关闭的或未打开的。 2. LISTEN&#xff1a;表示服务器端的某个套接字&#xff08;SOCKET&#xff09;处于监听状态&#…

Linux 软件包工具rpmbuild

下载工具rpm-build yum search rpm-build yum install rpm-build.x86_64制作属于自己的RPM包 1.准备打包目录 ls rpmbuild/ BUILD BUILDROOT RPMS SOURCES SPECS SRPMS 2.放入软件包 cp /root/nginx-1.18.0.tar.gz rpmbuild/SOURCES/ 3.编辑spec文件 vim rpmbuild/SPECS/n…

数字信号处理(MATLAB入门例子)

&#xff08;代码主要来源于这本书&#xff09; 1.用MATLAB产生32个正弦波样本&#xff0c;A2&#xff0c;f1000Hz&#xff0c;以及fs8000Hz % % Example 2.1 Sinewave generator % This example generate 32 sine sample, % plot it and save in sine.dat file% For the boo…

Vue js闭包

JavaScript闭包详解 在JavaScript中&#xff0c;闭包是一个非常重要的概念&#xff0c;也是JavaScript区别于其他语言的一大特色。理解闭包不仅有助于提升我们的编程技能&#xff0c;还能让我们更好地利用JavaScript的特性和优势。本文将详细解析闭包的概念、原理、应用以及相…

【AI相关】《这就是ChatGPT》读书笔记

《这就是ChatGPT》 斯蒂芬沃尔弗拉姆 这本书用了两天就一口气读完了&#xff0c;通篇读完后&#xff0c;这本书主要是介绍了ChatGPT怎么能做到生成内容的一些背后的原理逻辑&#xff0c;总结一下这本书是ChatGPT通过大量的数据&#xff08;这些数据来自网络、书籍等等类似于数据…

低代码技术的全面应用:加速创新、降低成本

引言 在当今数字化转型的时代&#xff0c;企业和组织面临着不断增长的应用程序需求&#xff0c;以支持其业务运营和创新。然而&#xff0c;传统的软件开发方法通常需要大量的时间、资源和专业技能&#xff0c;限制了企业快速响应市场变化和业务需求的能力。在这样的背景下&…