因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程,需要的朋友可以参考下
因业务需求，需要一个树形表格，并且支持拖拽排序，任意未知插入，github搜了下，真不到合适的，大部分树形表格都没有拖拽功能，所以决定自己实现一个。这里分享一下实现过程，项目源代码请看github，插件已打包封装好，发布到npm上
本博文会分为两部分，第一部分为使用方式，第二部分为实现方式
安装方式
npm i drag-tree-table --save-dev
使用方式
import dragTreeTable from 'drag-tree-table'
模版写法
data参数示例
{ lists: [ { "<mark style="color:transparent">本文来源gaodaimacom搞#^代%!码&网*</mark>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 '<i>查看角色</i>' } }, { text: '编辑', onclick: this.onEdit, formatter: (item) => { return '<i>编辑</i>' } } ] }, ] }
onDrag在表格拖拽时触发，返回新的list
onTreeDataChange(lists) { this.treeData.lists = lists }
到这里组件的使用方式已经介绍完毕
实现
•递归生成树姓结构（非JSX方式实现）
•实现拖拽排序（借助H5的dragable属性）
•单元格内容自定义展示
组件拆分-共分为四个组件
dragTreeTable.vue是入口组件，定义整体结构
row是递归组件（核心组件）
clolmn单元格，内容承载
space控制缩进
看一下dragTreeTable的结构
<div class="drag-tree-table"> <div class="drag-tree-table-header"> {{item.title}} </div><div class="drag-tree-table-body"> </div></div>
看起来分原生table很像，dragTreeTable主要定义了tree的框架，并实现拖拽逻辑
filter函数用来匹配当前鼠标悬浮在哪个行内，并分为三部分，上中下，并对当前匹配的行进行高亮
resetTreeData当drop触发时调用，该方法会重新生成一个新的排完序的数据，然后返回父组件
下面是所有实现代码
row组件核心在于递归，并注册拖拽事件，v-html支持传入函数，这样可以实现自定义展示，渲染数据时需要判断是否有子节点，有的画递归调用本身，并传入子节点数据
结构如下
<div class="tree-block"> <div class="tree-row"> <span> <span class="zip-icon"> </span><span class="zip-icon arrow-transparent"> </span><span></span><span></span></span><span> <i></i> </span><span> {{model[subItem.field]}} </span><span> {{model[subItem.field]}} </span><div class="hover-model"> <div class="hover-block prev-block"> <i class="el-icon-caret-top"></i></div><div class="hover-block center-block"> <i class="el-icon-caret-right"></i></div><div class="hover-block next-block"> <i class="el-icon-caret-bottom"></i></div></div></div> </div> import column from './column.vue' import space from './space.vue' export default { name: 'row', props: ['model','depth','columns'], data() { return { open: false, visibility: 'visible' } }, components: { column, space }, computed: { isFolder() { return this.model.lists && this.model.lists.length } }, methods: { toggle() { if(this.isFolder) { this.model.open = !this.model.open } }, dragstart(e) { e.dataTransfer.setData('Text', this.id); window.dragId = e.target.children[0].getAttribute('tree-id') e.target.style.opacity = 0.2 }, dragend(e) { e.target.style.opacity = 1; } } }
clolmn和space比较简单，这里就不过多阐述
上面就是整个实现过程，组件在chrome上运行稳定，因为用H5的dragable，所以兼容会有点问题，后续会修改拖拽的实现方式，手动实现拖拽
总结
以上所述是小编给大家介绍的基于Vue实现可以拖拽的树形表格实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对gaodaima搞代码网网站的支持！
- vue+element UI实现树形表格
- 详解vue-cli+element-ui树形表格(多级表格折腾小计)
- vue+element UI实现树形表格带复选框的示例代码
- vue实现树形表格
以上就是基于Vue实现可以拖拽的树形表格实例详解的详细内容，更多请关注gaodaima搞代码网其它相关文章！
转载请注明原文链接：基于Vue实现可以拖拽的树形表格实例详解
