基于Vue实现可以拖拽排序的树形表格（已开源）

项目需要一个可以拖拽排序的树形表格，github上搜了一下，并为找到，大部分都不支持拖拽，所以自己实现了一个简单的组件，已开源 源代码在这里，并发布到npm上，如果有类似需求可以试一下，chrome上没有任何问题

效果图如下：

drag-tree-table

使用方式

---

npm i drag-tree-table --save-dev
复制代码

import dragTreeTable from 'drag-tree-table'
复制代码

<dragTreeTable :data="treeData" :onDrag="onTreeDataChange"></dragTreeTable>
复制代码

// state
treeData: {
  lists: [],
  columns: []
}
// methods
onTreeDataChange(list) {
  this.treeData.lists = list
},
复制代码

数据源（lists）配置

参数	可选值	描述
id	String	唯一标志
parent_id	String	父节点ID
order	Number	排序,0开始,onDrag后order会重置
name	String	默认显示内容
open	Boolean	true展开,false收起
lists	Array	子节点

lists 配置示例

[
 {
   "id":40,
   "parent_id":0,
   "order":0,
   "name":"动物类",
   "uri":"/masd/ds",
   "open":true,
   "lists":[]
 },{
   "id":5,
   "parent_id":0,
   "order":1,
   "name":"昆虫类",
   "uri":"/masd/ds",
   "open":true,
   "lists":[
     {
       "id":12,
       "parent_id":5,
       "open":true,
       "order":0,
       "name":"蚂蚁",
       "uri":"/masd/ds",
       "lists":[]
     }
   ]