因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程，项目源代码请看github，插件已打包封装好，发布到npm上
本博文会分为两部分，第一部分为使用方式，第二部分为实现方式
安装方式
npm i drag-tree-table --save-dev
使用方式
import dragTreeTable from 'drag-tree-table'
模版写法
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":[]
}
],
columns: [
{
type: 'selection',
title: '名称',
field: 'name',
width: 200,
align: 'center',
formatter: (item) => {
return ''+item.name+''
}
},
{
title: '操作',
type: 'action',
width: 350,
align: 'center',
actions: [
{
text: '查看角色',
onclick: this.onDetail,
formatter: (item) => {
return '查看角色'
}
},
{
text: '编辑',
onclick: this.onEdit,
formatter: (item) => {
return '编辑'
}
}
]
},
]
}
onDrag在表格拖拽时触发，返回新的list
onTreeDataChange(lists) {
this.treeData.lists = lists
}
到这里组件的使用方式已经介绍完毕
实现
•递归生成树姓结构（非JSX方式实现）
•实现拖拽排序（借助H5的dragable属性）
•单元格内容自定义展示
组件拆分-共分为四个组件
dragTreeTable.vue是入口组件，定义整体结构
row是递归组件（核心组件）
clolmn单元格，内容承载
space控制缩进
看一下dragTreeTable的结构
{{item.title}} |
看起来分原生table很像，dragTreeTable主要定义了tree的框架，并实现拖拽逻辑
filter函数用来匹配当前鼠标悬浮在哪个行内，并分为三部分，上中下，并对当前匹配的行进行高亮
resetTreeData当drop触发时调用，该方法会重新生成一个新的排完序的数据，然后返回父组件
下面是所有实现代码
row组件核心在于递归，并注册拖拽事件，v-html支持传入函数，这样可以实现自定义展示，渲染数据时需要判断是否有子节点，有的画递归调用本身，并传入子节点数据
结构如下