使用 VueGraggablePlus 实现 el-table 等第三方组件的拖拽排序

使用 VueGraggablePlus 实现 el-table 等第三方组件的拖拽排序

引言

当我们有一些表格数据需要可以调整顺序时，最直观的做法是拖拽（正如大部分 APP 的做法一样）。

我主要使用 vue3 + element plus 进行开发，当遇到这个需求时网上最常见的解决方案是 vue draggable，可惜这个项目已经 3 年没更新了，而另一个实现了类似功能并且还在积极更新的项目是 vue-draggable-plus，用法非常简单，而且可以很简单地支持第三方组件（例如 el-table）的拖拽排序。

可惜网上对于这个库的介绍非常有限，大多数就是照抄本就简略的官方文档。本文将介绍它在实际开发中的使用方法，帮助有类似需求的朋友节省时间。

演示

安装：npm install vue-draggable-plus

以下代码写了一个表格，并将其用VueDraggable包裹起来以实现拖拽排序。并且在下方展示了数据的真实顺序。

<template>
  <div style="width: 500px">
    <VueDraggable target="tbody" v-model="userList" :animation="150">
      <el-table :data="userList">
        <el-table-column label="姓名" prop="name"/>
        <el-table-column label="年龄" prop="age"/>
      </el-table>
    </VueDraggable>

    {{ userList }}
  </div>
</template>

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

const userList = ref([
  {
    name: 'jack',
    age: 18
  },
  {
    name: 'mary',
    age: 20
  }
])
</script>

<style scoped>

</style>

适配第三方组件的重点在于target属性，官方文档的描述非常简略难懂。

target 的内容其实就是一个 css 选择器，VueDraggable要根据它来定位所有行的根组件，这个选择器可以通过浏览器 f12 找到。

在下图中，我们可以看到 2 行数据的根组件是一个tbody，我们可以直接使用标签选择器选中它，即target="tbody"

然后你就可以通过拖拽来实现对数组元素的排序了。

总结

本文介绍了如何使用使用 VueGraggablePlus 实现第三方组件的拖拽排序，并使用 el-table 举例。