基于Vue实现可以拖拽排序的树形表格
npm install drag-tree-tableIE10+/Chrome/firefox
2.0.8`及以上版本 在线DEMO支持拖拽排序、固定头、拖拽改变行宽，checkbox多选、自定义单元格内容、设置行的背景色、动态控制某些行是否可以拖拽等等....
bashs
npm i drag-tree-table --save-dev
`
script
bashs
`
使用方式
html
:onDrag="onTreeDataChange"
fixed
border>
如何使用
---$3
`shell
npm install --save drag-tree-table
`$3
html
`
全局方法
组件目前提供了如下方法方法|参数|描述
---|--|---:
DelById|id|删除ID对应的行，返回删除后的数据，需要手动更新数据e
ZipAll|无|全部折叠
OpenAll|无|全部打开
GetLevelById|id|根据ID获取当前行的层级level
具体使用方式可以点击上面超链，查看具体demo
参数配置
---data: 表格数据源
onDrag: 拖拽动作完成后触发
isdraggable: 是否开启拖拽
beforeDragOver: 动态控制当前行是否可以拖拽，及被拖拽进入的行是否允许插入
以上四个参数为动态参数
示例：
:onDrag="onTreeDataChange"
:isdraggable="false">
----
下面所有参数为静态参数，直接添加即可
示例：
:onDrag="onTreeDataChange"
border
fixed>
fixed:固定表头
height: 设置表格高度
border: 显示边框
resize: 支持表格宽度调整
onlySameLevelCanDrag: 禁止拖拽改变层级
hightRowChange: 高亮显示被拖拽的行
---
$3
columns:[] // 表头配置参数
lists: [] // 表格数据
custom_field: {} // 自定义字段的配置（非必需）
---
$3
参数|必填项|默认值|可选值|描述
---|--|--|--|---:
type|否|null|'default', 'selection', 'actions', 'checkbox'|
title|是||String|表格标题
field|是||String|单元格内容取值使用
width|否||Number|单元格宽度
align|否|left|left,center,right|单元格对齐方式
flex|否||Number|自动填充空余区域，遵循CSS的flex布局
formatter|否||Function|自定义单元格显示内容,参数为当前行数据
columns数据事例
javascript
[
{
type: 'selection',
title: '菜单名称',
field: 'name',
width: 200,
align: 'center',
formatter: (item) => {
return ''+item.name+''
}
},
{
type: 'checkbox',
isContainChildren: true, //是否勾选子节点，默认false
onChange: this.onCheck, // parmas selectRows
title: '链接',
field: 'url',
width: 200,
align: 'center'
},
{
title: '操作',
type: 'action',
width: 350,
align: 'center',
actions: [
{
text: '查看角色',
onclick: (item) => {
// item是当前行的数据
console.log(item)
},
formatter: (item) => {
return '查看角色'
}
},
{
text: '编辑',
onclick: (item) => {
// item是当前行的数据
console.log(item)
},
formatter: (item) => {
return '编辑'
}
}
]
},
]
`$3
参数|参数类型|描述
---|:--:|---:
id|String|唯一标志
parent_id|String|父节点ID
order|Number|排序,0开始,onDrag后order会重置
name|String|默认显示内容
open|Boolean（非必须）|true展开,false收起(默认收起)
lists|Array|子节点
isShowCheckbox|Boolean|控制CheckBox列某些行是否显示CheckBox
backgroundColor|web color|行的背景色
lists示例数据
javascript
[
{
"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,
"isShowCheckbox": false, '如果设置了type=checkbox,但是想控制某些行不显示CheckBox，可以用此属性'
"lists":[
{
"id":12,
"parent_id":5,
"open":true,
"order":0,
"name":"蚂蚁",
"uri":"/masd/ds",
"lists":[]
}
]
},
{
"id":19,
"parent_id":0,
"order":2,
"name":"植物类",
"uri":"/masd/ds",
"open":true,
"lists":[]
}
]
`$3
可以指定组件字段的默认取值，没必要完全按照我定的字段名字
支持自定义设置的字段有id、order、lists、parent_id`,
`
custom_field: {
id: 'id',
order: 'sort',
lists: 'children',
parent_id: 'parent_id'
}