本文介绍了如何使用Vue实现一个支持拖拽排序的树状表格。通过自定义组件`drag-tree-table`，实现了递归生成树形结构、拖拽排序功能。详细讲解了组件的安装、使用方式及实现原理，包括递归组件、拖拽逻辑和单元格自定义展示。文章还分享了项目源代码和npm包。
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，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属性)
•单元格内容自定义展示
组件拆分-共分为四个组件
<
最低0.47元/天 解锁文章
扫一扫
3362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
