ElTableTreeDnd 组件介绍

ElTableTreeDnd 是一个基于 Element Plus 的 el-table 组件进行扩展的 Vue3 组件，它提供了树形表格的功能，并增加了拖拽节点的能力。该组件适用于需要展示层级结构数据，并且允许用户通过拖拽来调整节点顺序或层级关系的场景。 拖拽是基于 @atlaskit/pragmatic-drag-and-drop 库，用于提供跨浏览器的拖拽和放置功能。

特性

• 树形结构: 支持多级树形数据的展示，用户可以展开或折叠节点。
• 拖拽功能: 用户可以拖拽表格中的节点，以改变其在树形结构中的位置。
• 自定义列: 支持自定义列内容和样式，可以定义不同的列类型，如选择框、索引等。
• 分页: 支持表格数据的分页展示，用户可以自定义每页显示的条目数。
• 插槽: 提供了默认插槽和表头插槽，允许用户自定义单元格内容和表头内容。
• 事件监听: 提供了多种事件监听，如拖拽开始、拖拽成功、选择变更等，方便用户进行自定义操作。

使用场景

• 组织架构管理：展示公司的组织架构，并允许用户通过拖拽调整部门或员工的归属。
• 文件夹管理：在文件管理系统中，展示文件夹的层级结构，并通过拖拽进行文件或文件夹的移动。
• 分类

预览截图

示例代码

example

git clone https://github.com/laterly/el-table-tree-dnd.git
cd el-table-tree-dnd
pnpm install
pnpm dev

访问:http://localhost:3002/即可查看example

安装

npm install --save el-table-tree-dnd

引入组件

首先需要引入 ElTableTreeDnd 组件：

import ElTableTreeDnd from 'el-table-tree-dnd';

属性

属性名	说明	类型	默认值
draggable	是否开启拖拽节点功能	boolean	true
data	表格数据	Recordable[]	[]
columns	表头数据	TableColumn[]	[]
rowKey	行数据的 Key，用来优化 Table 的渲染	string	'id'
defaultExpandAll	是否默认展开所有行	boolean	true
lazy	是否懒加载子节点数据	boolean	false
treeProps	树形数据相关配置	{ hasChildren?: string; children?: string; label?: string }	{ hasChildren: 'hasChildren', children: 'children', label: 'label' }
showOverflowTooltip	当内容过长被隐藏时显示 tooltip	boolean	true
align	表格内容对齐方式	'left' | 'center' | 'right'	'left'
headerAlign	表头对齐方式	'left' | 'center' | 'right'	'left'
pageSize	每页显示条目个数	number	20
currentPage	当前页码	number	1
pagination	分页配置	Pagination	-
loading	是否显示加载中	boolean	false

columns 表头数据属性详细说明

columns 定义了表格列的属性，以下是每个属性的具体说明：

属性名	说明	类型	默认值
prop	对应列内容的字段名	string	-
label	显示的标题	string	-
type	对应列的类型，如果设置了 selection 则显示多选框，如果设置了 index 则显示该行的索引（从 1 开始）	"index" | "selection"	-
slots	列插槽，定义了默认插槽和表头插槽的名称	{ default?: string; header?: string; }	-
index	如果设置了 type=index，可以自定义索引的值	number | ((index: number) => number)	-
columnKey	列的 key，如果需要使用 filter-change 事件，则需要此属性标识列	string	-
width	列宽度	string | number	-
minWidth	列最小宽度，与 width 的区别是 width 是固定的，minWidth 是最小宽度，如果列的宽度小于 minWidth 会使用 minWidth 作为列宽度	string | number	-
fixed	列是否固定在左侧或者右侧，true 表示固定在左侧	boolean | "left" | "right"	-
sortMethod	对数据进行排序的时候使用的方法，仅当 sortable 为 true 时有效	(...args: any[]) => number	-
sortBy	指定数据按照哪个属性进行排序，仅当 sortable 为 true 时有效	string | string[] | ((...args: any[]) => string | string[])	-
sortOrders	数据在排序时所使用排序策略的数组，仅当 sortable 为 true 时有效	(string | null)[]	-
resizable	是否可以通过拖动改变列的宽度（需要在 el-table 上设置 border 属性为 true）	boolean	-
formatter	用来格式化内容	(row: Recordable, column: TableColumn, $index?: number) => any	-
showOverflowTooltip	当内容过长被隐藏时显示 tooltip	boolean	true
align	表格列内容的对齐方式	"left" | "center" | "right"	"left"
headerAlign	表头对齐方式，若不设置该项，则使用表格的对齐方式	"left" | "center" | "right"	-
className	列的 className	string	-
labelClassName	当前列标题的自定义类名	string	-
selectable	是否允许用户选择复选框	(...args: any[]) => boolean	-
reserveSelection	当用户切换分页时，保留之前页面的选择项（需设置 row-key）	boolean	-
filters	数据过滤的选项	Array<{ text: string; value: string }>	-
filterPlacement	过滤弹出框的定位	string	-
filterMultiple	数据过滤的选项是否多选	boolean	-
filterMethod	数据过滤使用的方法	(...args: any[]) => boolean	-
filteredValue	选中的数据过滤项，如果需要异步筛选，需要自己更新这个值	string[]	-
[key: string]	其他自定义属性	any	-

请注意，以上属性中，部分属性（如 sortMethod、sortBy、sortOrders）需要与 el-table 的 sortable 属性配合使用。

事件

事件名	说明	回调参数
node-drop	拖拽成功完成时触发的事件	(data: Recordable[], source: Recordable, target: Recordable)
node-drag-start	节点开始拖拽时触发的事件	-
selection-change	改变selection	(data: Recordable[])
update:pageSize	更新每页显示条目个数	(num: number)
update:currentPage	更新当前页码	(num: number)

插槽

插槽名	说明	插槽作用域参数
column.slots.header	表头插槽	-
column.slots.default	列默认插槽	{ row, column, $index }

方法

方法名	说明	参数
getElTableExpose	获取 el-table 实例，通常表格操作	-

基本使用示例

<template>
  <el-table-tree-dnd
    :data="tableData"
    :columns="columns"
    @node-drop="handleNodeDrop"
    @node-drag-start="handleNodeDragStart"
  >
    <template #stateHeader> 状态标题 </template>
    <template #state="{ row }"> 状态:{{ row.state }} </template>
  </el-table-tree-dnd>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ElTableTreeDnd,{ TableColumn } from 'el-table-tree-dnd';
import 'el-table-tree-dnd/dist/style.css';

const tableData = ref<TableColumn<any>[]>([
  {
    id: 1,
    title: "节点 1",
    state:1,
    children: [
      {
        id: 2,
        title: "子节点 1-1",
        state:2,
        children: [
          {
            id: 5,
            title: "子节点 1-1-1",
            state:3,
          },
          {
            id: 6,
            title: "子节点 1-1-2",
            state:4,
          },
        ],
      },
      {
        id: 3,
        title: "子节点 1-2",
        state:5,
      },
    ],
  },
  {
    id: 4,
    title: "节点 2",
    state:9,
    children: [
      {
        id: 7,
        title: "子节点 2-1",
        state:8,
      },
      {
        id: 8,
        title: "子节点 2-2",
        state:5,
      },
    ],
  },
]);

const columns = ref([
  {
    prop: "title",
    label: "标题",
    formatter: (row) => {
      return row?.title;
    },
  },
  {
    prop: "state",
    label: "状态",
    slots: {
      default: "state",
      header: "stateHeader",
    },
  }
]);

const handleNodeDrop = (data: Recordable[], source: Recordable, target: Recordable) => {
  console.log('Node dropped:', data, source, target);
  tableData.value = data;
};

const handleNodeDragStart = () => {
  console.log('Node drag started');
};

</script>

<style scoped>
/* Add your styles here */
</style>

相关文档地址

查看 @atlaskit/pragmatic-drag-and-drop GitHub 仓库

查看 Element Plus 官方文档