vue树形多列_基于Vue实现可以拖拽的树形表格（原创）

本博文会分为两部分，第一部分为使用方式，第二部分为实现方式

安装方式

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的结构