Vue3中优雅地实现表格拖动排序功能!

在 Vue.js 中主要通过第三方库实现表格拖动排序功能，其中最常用的库是 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>