表格行拖拽

vue-draggable-plus指南-教程

表格行拖拽

vue-draggable-plus 提供了灵活的表格行拖拽能力，其核心思路是将表格的 <tbody> 指定为目标容器，再配合组件、函数或指令三种不同的调用方式，即可快速实现行排序交互。

这三种方式分别对应不同的编码习惯与业务场景，但底层能力一致，均保持了原生表格结构，易于与 Element Plus 等主流 UI 库集成。

组件使用

vue 复制代码

<template>
  <VueDraggable v-model="list" target=".sort-target" :animation="150">
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody class="sort-target">
        <tr v-for="item in list" :key="item.name" class="cursor-move">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
  </VueDraggable>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
</script>

最推荐的方式是使用组件包裹。这种方式代码侵入性最低，只需在表格外层套上可拖拽容器，在 :list 属性中传入行数据数组即可，适合绝大多数列表管理页面。

函数使用

vue 复制代码

<template>
  <table class="table table-striped">
    <thead class="thead-dark">
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody ref="el" class="sort-target">
      <tr v-for="item in list" :key="item.name" class="cursor-move">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
const el = ref()

useDraggable(el, list)
</script>

函数式调用适合对代码组织有更高要求的场景，或在 setup 中手动控制拖拽逻辑时使用。传入相应的 DOM 容器与数据列表，即可获得完整的拖拽行排序能力。

指令使用

vue 复制代码

<template>
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody v-draggable="list">
      <tr v-for="item in list" :key="item.name" class="cursor-move">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
</script>

指令式用法适合习惯声明式写法的开发者。通过 v-draggable 指令绑定到表格结构上，可以快速复用拖拽能力，配置同样简洁，便于在多个表格间统一使用。

提示
以上三种方式均可互换，实际项目中选择最贴合团队代码风格的一种即可。若需要进一步了解目标容器的匹配规则，请参阅目标容器文档。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。