拖拽生成多级表头

vuedraggable库的github网址：https://github.com/SortableJS/Vue.Draggable

vuedraggable功能展示：https://sortablejs.github.io/Vue.Draggable/#/simple

技术：vue3+naive框架

因为项目里用的是naive框架，动态表格的表头数据格式如下columns(替换成多级的数据格式即可)

利用vuedraggable拖拽生成多级表头的大致实现如下：

1、第一层draggable，将字段拖拽至列的区域，此时列的结构是对象数组；

[
	{
		title:'',
		key:''
	},
	{
		title:'',
		key:''
	}
]

2、第二层实现：第一层每一项都具有一个加号，点击的时候可以给当前项的这个对象会添加一个属性：children，这个属性可以用来存放当前列的下一级的数据，并且需要添加一个子拖动区域draggable，让字段拖拽到该区域，并保存子区域的数据结构，并放入children中；

[
	{
		title:'',
		key:''
	},
	{
		title:'',
		key:'',
		children:[] //点击加号
	}
]

3、第三层同理；

[
	{
		title:'',
		key:''
	},
	{
		title:'',
		key:'',
		children:[
			{
				title:'',
				key:''
			},
			{
				title:'',
				key:'',
				children:[]
			}
		]
	}
]

然后拿到的对象数组可以当成表格表头列的数据结构。