项目需要一个可以拖拽排序的树形表格,github上搜了一下,并为找到,大部分都不支持拖拽,所以自己实现了一个简单的组件,已开源 源代码在这里,并发布到npm上,如果有类似需求可以试一下,chrome上没有任何问题
效果图如下:
使用方式
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":[]
}
]