mafengwo/vue-drag-tree-table：基于Vue的可拖拽排序树形表格

【Github】项目名：mafengwo/vue – drag – tree – table：基于Vue的可拖拽排序树形表格

项目简介

mafengwo/vue – drag – tree – table是一个基于Vue实现的树形表格项目。它具有很多功能，例如支持拖拽排序、固定表头、拖拽改变行宽、checkbox多选、自定义单元格内容、设置行的背景色、动态控制某些行是否可拖拽等。

安装与使用

安装方面，可以使用npm命令：npm install drag - tree - table --save - dev。使用方式如下：

在模板中：
<template><div id="app"><dragTreeTable :data="treeData" :onDrag="onTreeDataChange" fixedborder></dragTreeTable></div></template>
在脚本中：
<script>
import dragTreeTable from "drag - tree - table";
export default {
name: "app",
data() {
return {
treeData: {
columns: [...],
lists: [...]
}
};
},
components: {
dragTreeTable
},
methods: {
onTreeDataChange(list) {
this.treeData.lists = list;
}
}
};
</script>

组件方法与参数

该组件目前提供了一些全局方法，例如DelById（根据id删除行并返回删除后的数据）、eZipAll（全部折叠）、OpenAll（全部打开）、GetLevelById（根据id获取当前行层级）等。

在参数方面，有动态参数如data（表格数据源）、onDrag（拖拽动作完成后触发）、isdraggable（是否开启拖拽）、beforeDragOver（动态控制当前行是否可拖拽及被拖拽进入的行是否允许插入）等；还有静态参数如fixed（固定表头）、height（设置表格高度）、border（显示边框）、resize（支持表格宽度调整）等。

项目总结

mafengwo/vue – drag – tree – table为处理树形表格数据且需要拖拽排序等功能的项目提供了很好的解决方案。如果你对这个项目有任何想法或者问题，欢迎在下方留言参与讨论。

项目地址

GitHub链接直达