html 拖拽树状表格,基于Vue实现可以拖拽的树形表格实例详解

因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，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属性)

•单元格内容自定义展示

组件拆分-共分为四个组件