基于Vue实现可以拖拽的树形表格实例详解
版权申诉
5星 · 超过95%的资源 18 浏览量
2020-11-29
22:13:21
上传
评论
收藏 94KB PDF 举报 
基于基于Vue实现可以拖拽的树形表格实例详解实现可以拖拽的树形表格实例详解
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有
拖拽功能，所以决定自己实现一个。这里分享一下实现过程，项目源代码请看github，插件已打包封装好，发布到npm上
本博文会分为两部分，第一部分为使用方式，第二部分为实现方式
安装方式安装方式
npm i drag-tree-table --save-dev
使用方式使用方式
import dragTreeTable from 'drag-tree-table'
模版写法模版写法
<dragTreeTable :data="treeData" :onDrag="onTreeDataChange"></dragTreeTable>
data参数示例
{
lists: [
{
"id":40,
"parent_id":0,
"order":0,
"name":"动物类",
"open":true,
"lists":[] },{
"id":5,
"parent_id":0,
"order":1,
"name":"昆虫类",
"open":true,
"lists":[
{
"id":12,
"parent_id":5,
"open":true,
"order":0,
"name":"蚂蚁",
"lists":[] }
] },
{
"id":19,
"parent_id":0,
"order":2,
"name":"植物类",
"open":true,
"lists":[] }
],
资源评论
MarkDu0072023-04-17资源内容详细，总结地很全面，与描述的内容一致，对我启发很大，学习了。
