el-table-tree-dnd v0.1.7

ElTableTreeDnd 组件介绍

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

特性

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

使用场景

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

安装

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

引入组件

首先需要引入 ElTableTreeDnd 组件：

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

属性

columns 表头数据属性详细说明

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

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

事件

插槽

方法

基本使用示例

<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 官方文档