Vue Draggable Tree是一款基于Vue.js的可拖动树形组件，适用于多层级嵌套的树形菜单，支持拖拽和排序功能。使用该组件可以方便地管理数据结构，提高用户体验。

安装

npm install --save vue-draggable-tree

如何使用

import VueDraggableTree from 'vue-draggable-tree'
export default{
name: 'my-component',
components: {
VueDraggableTree
},
data(){
// 数据结构
const data = [
{
label: 'Node 1',
children: [
{ label: 'Node 1-1' },
{ label: 'Node 1-2' }
]
},
{
label: 'Node 2',
children: [
{ label: 'Node 2-1' },
{
label: 'Node 2-2',
children: [
{ label: 'Node 2-2-1' },
{ label: 'Node 2-2-2' }
]
}
]
}
]
return {
data
}
}
}

组件属性

// 数据源
props:{
data: {
type: Array,
default: () =>[]
}
},
// 回调函数
props:{
change: {
type: Function,
default: () =>{}
}
}

组件实例

{
console.log(newData) // 数据更新后的内容
}"
/>

总结

借助Vue Draggable Tree，我们可以轻松地实现树形结构的拖拽和排序，并且组件具有非常大的可定制性，能够适应多种场景的需求。