vue-draggable-tree-next

本组件是基于vue3 + Vue.Draggable构建的可拖拽、可视化的JSON树，支持节点新建、复制粘贴、编辑、拖拽和删除等功能

特性

• 初始化数据支持对象Object，同时支持自定义视图
• 节点类型覆盖数值、布尔值、字符串、键值对、对象、数组和自定义
• 节点支持新增、编辑、复制粘贴和删除
• 节点可进行拖拽剪贴至其他节点下

演示

安装

需要提前安装tdesign-vue-next，主要用于icon的使用和消息提示

1npm install vue-draggable-tree-next tdesign-vue-next

示例

1<template>
2    <draggable-tree :init-data="initObject" @change="handleChange" />
3</template>
4
5<script lang="ts" setup>
6import DraggableTree from "../packages/components/draggable-nested-tree/index.vue";
7import { ref } from "vue";
8
9const initObject = {
10  Shrek: {},
11  Fiona: {
12    "Prince Charming": {
13      LordFarquad: "测试1",
14      LordLogo: "测试2",
15    },
16  },
17  Donkey: [],
18  Yes: [],
19};
20
21
22const handleChange = (data: any) => {
23  console.log(data);
24};
25</script>
26