使用Vue3优雅地实现表格拖动排序

更新时间：2025年01月08日 08:22:57 作者：知否技术

在 Vue.js 中主要通过第三方库实现表格拖动排序功能,其中最常用的库是 SortableJS,下面我们就来看看如何使用SortableJS实现表格拖动排序吧

1. 安装 sortablejs

npm i sortablejs --save

2. 初始化表格数据

这里使用 ElementPlus 作为前端组件库

注意要给 el-table 绑定 row-key 属性，并设置 ref。

  <el-table
    ref="tableRef"
    border
    :data="tableData"
    :row-key="(row) => row.id"
    style="width: 100%"
  >
    <el-table-column type="index" label="序号" width="55" />
    <el-table-column prop="id" label="id" width="100"> </el-table-column>
    <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
  </el-table>

js 部分

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
const tableRef = ref();
// 表格数据
const tableData = ref([
  { id: 110, age: 20, name: "李白" },
  { id: 120, age: 21, name: "杜甫" },
  { id: 130, age: 22, name: "白居易" },
  { id: 130, age: 27, name: "知否君" },
]);
</script>

3. 使用 sortablejs

3.1 导入 sortablejs

import Sortable from "sortablejs";

3.2 使用 sortablejs 创建拖动表格方法

const sortableRow = ref(null);
const sortableColumn = ref(null);
// 拖动表格行
const onSortableRow = () => {
  sortableRow.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__body-wrapper tbody"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 获取新的行位置
        const currRow = tableData.value.splice(oldIndex, 1)[0];
        // 重新排列行位置
        tableData.value.splice(newIndex, 0, currRow);
      },
    }
  );
};
// 拖动表格列
const onSortableColumn = () => {
  sortableColumn.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__header-wrapper thead tr"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 1.获取表格列
        const table = tableRef.value;
        const oldColumns = table.store.states.columns;
        // 2. 重新排列列的顺序
        const newColumns = [...oldColumns.value];
        const movedColumn = newColumns.splice(oldIndex, 1)[0];
        newColumns.splice(newIndex, 0, movedColumn);
        oldColumns.value = newColumns;
      },
    }
  );
};

3.3 在周期函数中调用方法

// 组件挂载之后执行
onMounted(() => {
  onSortableRow();
  onSortableColumn();
});

3.4 销毁实例

// 销毁
onBeforeUnmount(() => {
  if (sortableRow.value) {
    sortableRow.value.destroy();
    sortableRow.value = null;
  }
  if (sortableColumn.value) {
    sortableColumn.value.destroy();
    sortableColumn.value = null;
  }
});

4. 完整代码

<template>
  <div>
    <el-card style="width: 30%">
      <el-table
        ref="tableRef"
        border
        :data="tableData"
        :row-key="(row) => row.id"
        style="width: 100%"
      >
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column prop="id" label="id" width="100"> </el-table-column>
        <el-table-column prop="age" label="年龄" width="100"> </el-table-column>
        <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import Sortable from "sortablejs";
import { ref, onMounted, onBeforeUnmount } from "vue";

const tableRef = ref();
// 表格数据
const tableData = ref([
  { id: 110, age: 20, name: "李白" },
  { id: 120, age: 21, name: "杜甫" },
  { id: 130, age: 22, name: "白居易" },
  { id: 130, age: 27, name: "知否君" },
]);
// 组件挂载之后执行
onMounted(() => {
  onSortableRow();
  onSortableColumn();
});
const sortableRow = ref(null);
const sortableColumn = ref(null);
// 拖动表格行
const onSortableRow = () => {
  sortableRow.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__body-wrapper tbody"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 获取新的行位置
        const currRow = tableData.value.splice(oldIndex, 1)[0];
        // 重新排列行位置
        tableData.value.splice(newIndex, 0, currRow);
      },
    }
  );
};
// 拖动表格列
const onSortableColumn = () => {
  sortableColumn.value = Sortable.create(
    tableRef.value.$el.querySelector(".el-table__header-wrapper thead tr"),
    {
      animation: 150,
      onEnd: ({ newIndex, oldIndex }) => {
        // 1.获取表格列
        const table = tableRef.value;
        const oldColumns = table.store.states.columns;
        // 2. 重新排列列的顺序
        const newColumns = [...oldColumns.value];
        const movedColumn = newColumns.splice(oldIndex, 1)[0];
        newColumns.splice(newIndex, 0, movedColumn);
        oldColumns.value = newColumns;
      },
    }
  );
};
// 销毁
onBeforeUnmount(() => {
  if (sortableRow.value) {
    sortableRow.value.destroy();
    sortableRow.value = null;
  }
  if (sortableColumn.value) {
    sortableColumn.value.destroy();
    sortableColumn.value = null;
  }
});
</script>

<style scoped></style>

效果图

到此这篇关于使用Vue3优雅地实现表格拖动排序的文章就介绍到这了,更多相关Vue3表格拖动排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue透传Attributes使用解析
本文主要介绍了Vue透传Attributes使用解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
Vue中使用a标签下载静态资源文件(如excel、pdf等)纯前端操作方法
这篇文章主要介绍了Vue中使用a标签下载静态资源文件(如excel、pdf等)纯前端操作方法的相关资料,需要的朋友可以参考下
2025-02-02
vue中axios的封装问题(简易版拦截,get,post)
这篇文章主要介绍了vue中axios的封装问题(简易版拦截,get,post),需要的朋友可以参考下
2018-06-06
vue开发移动端h5环境搭建的全过程
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,下面这篇文章主要给大家介绍了关于vue开发移动端h5环境搭建的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08
Vue按需加载的具体实现
本篇文章主要介绍了Vue按需加载的具体实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
Vue手写实现组件初渲染
这篇文章主要介绍了Vue手写实现组件初渲染，在Vue进行文本编译之后，会得到代码字符串生成的render函数，本文会基于render函数展开主题相关内容，感兴趣的朋友可以参考一下
2022-08-08
前端项目vue3/React如何使用pako库解压缩后端返回gzip数据
pako是一个流行的JS库,用于在浏览器中进行数据压缩和解压缩操作,它提供了对常见的压缩算法的实现,使开发者能够在客户端上轻松进行数据压缩和解压缩,这篇文章主要介绍了前端项目vue3/React使用pako库解压缩后端返回gzip数据,需要的朋友可以参考下
2024-07-07
Vue中Axios的封装与接口管理详解
在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中,下面这篇文章主要给大家介绍了关于Vue中Axios的封装与接口管理的相关资料,需要的朋友可以参考下
2022-03-03
vue项目如何实现ip和localhost同时访问
这篇文章主要介绍了vue项目如何实现ip和localhost同时访问，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue对象的单层劫持图文详细讲解
这篇文章主要介绍了vue2.x对象单层劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01