vue树形表格拖拽排序

Question

vue2 + elementui 实现多级表格拖拽（限同级拖拽）。有推荐的组件和案例嘛？

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue树形表格拖拽排序

你想实现一个 Vue 2 + ElementUI 的多级表格拖拽排序，限同级拖拽。下面是一些推荐的组件和案例：

1. Vue Drag and Drop: 这是一个功能强大的 Vue 组件，可以实现拖拽排序、复制、粘贴等功能。它支持多级表格拖拽排序。

<template>
  <div>
    <draggable v-model="list" :options="{ group: 'people' }">
      <template #item="item">
        <div>{{ item.name }}</div>
      </template>
    </draggable>
  </div>
</template>

<script>
import { Draggable } from 'vue-draggable';

export default {
  components: { Draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        { id: 3, name: 'Bob' },
      ],
    };
  },
};
</script>

1. Element UI 的 Tree Table: Element UI 提供了一个 Tree Table 组件，可以实现多级表格。它也支持拖拽排序，但是需要自行实现。

<template>
  <el-tree-table
    :data="tableData"
    :columns="columns"
    :default-expand-all="true"
    :highlight-current-row="true"
  >
    <template #default="scope">
      <span>{{ scope.row.name }}</span>
    </template>
  </el-tree-table>
</template>

<script>
import { ElTreeTable } from 'element-ui';

export default {
  components: { ElTreeTable },
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'John',
          children: [
            { id: 2, name: 'Jane' },
            { id: 3, name: 'Bob' },
          ],
        },
      ],
      columns: [
        { label: 'Name', prop: 'name' },
      ],
    };
  },
};
</script>

1. 自行实现: 如果你不想使用第三方组件，可以自行实现拖拽排序。可以使用 Vue 的 @dragover 和 @drop 事件来实现拖拽排序。

这些都是 Vue 2 + ElementUI 实现多级表格拖拽排序的推荐组件和案例。