Drag and Drop Rows in Tree Table with vxe-table and Sortable

2022-11-18 16:51:17

用 vxe-table 和 Sortable 为树状表格赋能，解锁拖拽式行重新排序

让你的树状表格脱颖而出

想要为你的树状表格应用提升用户体验，引入行拖拽重新排序吗？这篇全面指南将指导你如何无缝集成 vxe-table 和 Sortable.js 来实现此功能。准备好释放用户交互的全新水平，为你的树状表格用户提供更多灵活性！

步骤 1：踏上安装之旅

vxe-table： 安装 vxe-table，一款强大的 Vue.js 数据表格组件，开启你的新冒险。使用以下命令释放它的潜力：

npm install vxe-table@latest

Sortable.js： 欢迎 Sortable.js，一个轻量级库，它赋予了拖拽交互的能力。用它唤醒你的应用程序：

npm install sortablejs@latest

步骤 2：用 HTML 和 CSS 铸造根基

HTML： 用 HTML 奠定树状表格的基础，为它创建一个容器：

<div id="app">
  <vxe-table
    ref="table"
    :data="tableData"
    :tree-config="treeConfig"
    @row-drag-end="handleDragEnd"
  >
    <vxe-column field="name" title="Name"></vxe-column>
    <!-- Additional columns -->
  </vxe-table>
</div>

CSS： 用 CSS 为你的树状表格添加样式，点缀一些视觉元素：

#app {
  width: 100%;
  height: 500px;
}

.vxe-table {
  width: 100%;
  height: 100%;
}

.vxe-table--tree-node--expand {
  background-color: #f5f5f5;
}

.vxe-table--tree-node--active {
  background-color: #e5e5e5;
}

步骤 3：JavaScript 的魔力 - 融合一切

导入模块： 迎接 vxe-table 和 Sortable.js 的力量：

import { VxeTable } from 'vxe-table';
import Sortable from 'sortablejs';

创建 Vue 实例： 用 Vue.js orchestrating 魔力：

const app = Vue.createApp({
  data() {
    return {
      tableData: [
        // Your tree table data
      ],
      treeConfig: {
        children: 'children',
        expandAll: false,
      },
    };
  },
  mounted() {
    // Initialize Sortable.js
    const table = this.$refs.table.$el.querySelector('.vxe-table--body');
    Sortable.create(table, {
      animation: 150,
      ghostClass: 'vxe-table--tree-node--dragging',
      onEnd: (e) => {
        this.handleDragEnd(e);
      },
    });
  },
  methods: {
    handleDragEnd(e) {
      // Handle row reordering logic here
    },
  },
});